Der :default
Pseudo-Selektor entspricht dem Standard in einer Gruppe zugeordneter Elemente, z. B. dem Optionsfeld in einer Gruppe von Schaltflächen, das standardmäßig ausgewählt ist, selbst wenn der Benutzer einen anderen Wert ausgewählt hat.
input(type="radio"):default + label:after ( content: ' (default)'; color: #999; font-style: italic; )
Das obige CSS zielt auf die Beschriftung ab, die unmittelbar nach dem standardmäßig ausgewählten Optionsfeld in einer Gruppe von Optionsfeldern angezeigt wird:
- rot
- Grün
- Blau
Auf die Beschriftung des grünen Optionsfelds folgt der Text „(Standard)“ in grauem, kursivem Text in unterstützenden Browsern.
- rot
- Grün
- Blau
Beispiele hierfür sind die Standardschaltfläche "Senden" in einer Gruppe von Schaltflächen, die Standardoption aus einem Popup-Menü, das Optionsfeld, für das das checked
Attribut im HTML festgelegt ist (wie in unterstützenden Browsern angezeigt), und die Kontrollkästchen, die standardmäßig aktiviert sind.
Mehr Ressourcen
- Demo
- MDN-Seite ein: Standard
- W3C CSS3 UI-Spezifikationen
- W3C-Selektoren Stufe 4
Browser-Unterstützung
Verschiedene Browser haben unterschiedliche Unterstützungsstufen. Firefox bietet volle Unterstützung. Webkit-Browser unterstützen standardmäßig Schaltflächen, jedoch nicht Radio oder Kontrollkästchen, und Opera ist die Umkehrung und unterstützt sie bei Optionsfeldern und Kontrollkästchen, jedoch nicht beim Senden.
- Opera unterstützt
:default
Kontrollkästchen und Optionsfelder. - Webkit-Browser, einschließlich Chrome und Safari, unterstützen
:default
die Schaltfläche "Senden" - Firefox unterstützt die
:default
Kontrollkästchen, Radio UND Eingabetypen. - Der Internet Explorer unterstützt keine
:default
Kontrollkästchen, Funkgeräte oder Eingabetypen.
Chrom | Safari | Feuerfuchs | Oper | IE | Android | iOS |
---|---|---|---|---|---|---|
10 | 5 | 4 | 10 | keiner | keiner | 5 |