CSS3 - Pseudoklassen - Formulare
1. Nach dem empty mal was Vernünftiges
Bei Formularen gibt es jetzt die Möglichkeit, ein paar Zustände abzufangen. Leider ist das meiner Meinung nach ein wenig rudimentär und es hätte ruhig mehr sein können, aber besser als gar nichts. Außerdem lernt man als Webentwickler, sich in Demut zu üben.
Ein Hinweis
Wie ihr hoffentlich alle wisst, gibt es bei Formularen zum Teil recht große Einschränkungen, was die Formatierungsmöglichkeiten angeht. Die gelten also nach wie vor.
2. checked
- 18.0
- 12.x
- 5.1
- 23.0
- 9.0/10.0
Hebt markierte Checkboxen und Radio-Buttons hervor. Da man die eh kaum formatieren kann, besteht die Möglichkeit, mit Nachbarselektoren zu arbeiten, um zum
Beispiel <label>-Elemente optisch hervorzuheben.
Beispiel
Beim Klicken auf die Checkbox verschwindet selbige und das nachfolgende(!) <label> wird vor Scham ganz rot.
input:checked+label {
color: #f00;
}
input[type=checkbox]:checked {
display: none
}
<input type="checkbox">
<label>Bla blubb</label>
3. disabled
- 18.0
- 12.x
- 5.1
- 23.0
- 9.0/10.0
Markiert alle Formular-Elemente, die über das gleichnamige Attribut verfügen.
Beispiel
Ein deaktiviertes Textfeld ist kaum noch zu sehen.
input:disabled {
border: 1px solid #dadada;
background: #fff;
}
<input type="text" name="bla" disabled="disabled" />
Ein Hinweis
Denselben Effekt erreicht man natürlich auch mit einem input[disabled="disabled"]. Aber! In der Variante ist die Schreibweise
wichtig. Denn es macht einen Unterschied ob im Formular-Element ein disabled="disabled" oder nur disabled steht. Bei unserer Pseudoklasse
dagegen spielt die Schreibweise keine Rolle!
4. enabled
- 18.0
- 12.x
- 5.1
- 23.0
- 9.0/10.0
.. ist logischerweise das genaue Gegenteil und gilt für alle aktiven Elemente eines Formulars.
Beispiel
Drei aktive Elemente.
*:enabled {
border: 1px solid #36628A;
background: #dadada;
color: #454545;
}
<input type="text" name="bla" value="blubb" />
<button type="reset">Button</button>
<input type="submit" value="Submit" />
zurück zum vorherigen Abschnitt weiter zum nächsten Abschnitt