: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 Attributselected
oder die erste aktivierte Option in der DOM-Reihenfolge.multiple
-<select>
-Elemente können mehr als eineselected
-Option haben, daher werden alle:default
entsprechen. <input type="checkbox">
und<input type="radio">
entsprechen, wenn sie das Attributchecked
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, 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 # selector-default |
Selectors Level 4 # default-pseudo |
Browser-Kompatibilität
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
:default |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Siehe auch
- Webforms — Arbeiten mit Benutzerdaten
- Styling von Webformularen
- Verwandte HTML-Elemente:
<button>
,<input type="checkbox">
,<input type="radio">
und<option>