: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 Pseudo-Klasse wählt Formularelemente aus, die in einer Gruppe verwandter Elemente als Standard definiert sind.

Probieren Sie es aus

Welche Elemente dieser Selektor anspricht, ist im HTML-Standard §4.16.3 Pseudo-classes definiert — er kann die <button>, <input type="checkbox">, <input type="radio"> und <option>-Elemente treffen:

  • Ein Standard-option-Element ist das erste mit dem Attribut selected oder die erste aktivierte Option in der DOM-Reihenfolge. multiple-<select>-Elemente können mehr als eine selected-Option haben, daher werden alle :default entsprechen.
  • <input type="checkbox"> und <input type="radio"> entsprechen, wenn sie das Attribut checked besitzen.
  • <button> entspricht, wenn es der Standard-Einsendebutton eines <form> ist: der erste <button> in der DOM-Reihenfolge, der zu dem Formular gehört. Dies gilt auch für <input>-Typen, die Formulare absenden, 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
# selector-default
Selectors Level 4
# default-pseudo

Browser-Kompatibilität

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
:default

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

Siehe auch