: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 Attributchecked
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, wieimage
odersubmit
.
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
- Webformulare — Arbeiten mit Benutzerdaten
- Styling von Webformularen
- Verwandte HTML-Elemente:
<button>
,<input type="checkbox">
,<input type="radio">
, und<option>