:default

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

Die :default CSS Pseudoklasse wählt Formularelemente aus, die in einer Gruppe verwandter Elemente als Standard definiert sind.

Probieren Sie es aus

Was dieser Selektor auswählt, ist in HTML Standard §4.16.3 Pseudoklassen definiert — er kann die <button>, <input type="checkbox">, <input type="radio">, und <option> Elemente auswählen:

  • Ein Standard-Optionselement ist das erste mit dem Attribut selected oder die erste aktivierte Option in DOM-Reihenfolge. multiple <select>s können mehr als eine ausgewählte Option haben, daher werden alle mit :default ausgewählt.
  • <input type="checkbox"> und <input type="radio"> passen, wenn sie das Attribut checked haben.
  • <button> passt, wenn es der Standard-Übermittlungsbutton eines <form>s ist: der erste <button> in DOM-Reihenfolge, der zu dem Formular gehört. Dies gilt auch für <input> Typen, die Formulare übermitteln, wie image oder submit.

Syntax

css
:default {
  /* ... */
}

Beispiele

HTML

html
<fieldset>
  <legend>Favorite season</legend>

  <input type="radio" name="season" id="spring" value="spring" />
  <label for="spring">Spring</label>

  <input type="radio" name="season" id="summer" value="summer" checked />
  <label for="summer">Summer</label>

  <input type="radio" name="season" id="fall" value="fall" />
  <label for="fall">Fall</label>

  <input type="radio" name="season" id="winter" value="winter" />
  <label for="winter">Winter</label>
</fieldset>

CSS

css
input:default {
  box-shadow: 0 0 2px 1px coral;
}

input:default + label {
  color: coral;
}

Ergebnis

Spezifikationen

Specification
HTML Standard
# selector-default
Selectors Level 4
# default-pseudo

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch