: Standard - CSS-Tricks

Anonim

Der :defaultPseudo-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 checkedAttribut 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 :defaultKontrollkästchen und Optionsfelder.
  • Webkit-Browser, einschließlich Chrome und Safari, unterstützen :defaultdie Schaltfläche "Senden"
  • Firefox unterstützt die :defaultKontrollkästchen, Radio UND Eingabetypen.
  • Der Internet Explorer unterstützt keine :defaultKontrollkästchen, Funkgeräte oder Eingabetypen.
Chrom Safari Feuerfuchs Oper IE Android iOS
10 5 4 10 keiner keiner 5