CSS-Pseudoklasse :default
Baseline
Weitgehend verfügbar
Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Januar 2020 browserübergreifend verfügbar.
Die :default-CSS-Pseudoklasse wählt Formularelemente aus, die innerhalb einer Gruppe zusammengehöriger Elemente die Standardelemente sind.
Probieren Sie es aus
label {
display: block;
margin-top: 0.5em;
}
fieldset {
margin-top: 0.5em;
}
input:default {
border: none;
outline: 2px solid deeppink;
}
<label for="name">Name (required):</label>
<input id="name" name="name" type="text" required />
<label for="birth">Date of birth:</label>
<input id="birth" name="birth" type="date" />
<label for="origin">How did you find out about us? (required)</label>
<select id="origin" name="origin" required>
<option value="">Choose an option</option>
<option value="google">Google</option>
<option value="facebook">Facebook</option>
<option value="advertisement">Advertisement</option>
</select>
<fieldset>
<legend>Preferred contact method:</legend>
<label>
<input name="contact" type="radio" value="email" checked /> Email
</label>
<label><input name="contact" type="radio" value="phone" /> Phone</label>
</fieldset>
<label>
<input name="newsletter" type="checkbox" checked /> I want to subscribe to a
personalized newsletter.
</label>
<label>
<input name="privacy" type="checkbox" required /> I have read and I agree to
the Privacy Policy (required).
</label>
Welche Elemente dieser Selektor auswählt, ist im HTML-Standard §4.16.3 Pseudoklassen definiert. Er kann auf die Elemente <button>, <input type="checkbox">, <input type="radio"> und <option> zutreffen:
- Das standardmäßig ausgewählte option-Element ist das erste mit dem Attribut
selectedoder das erste aktivierte option-Element in DOM-Reihenfolge.<select>-Elemente mitmultiplekönnen mehr als eineselected-Option haben; daher trifft:defaultauf alle diese Optionen zu. - Auf
<input type="checkbox">und<input type="radio">trifft:defaultzu, wenn sie das Attributcheckedhaben. - Auf
<button>trifft:defaultzu, wenn es die Standardschaltfläche zum Absenden eines<form>ist: das erste<button>in DOM-Reihenfolge, das zum Formular gehört. Dies gilt auch für<input>-Typen, die Formulare absenden, etwaimageodersubmit.
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
| Spezifikation |
|---|
| HTML # selector-default |
| Selectors Level 4 # default-pseudo |
Browser-Kompatibilität
Siehe auch
- Webformulare – Arbeiten mit Benutzerdaten
- Webformulare gestalten
- Verwandte HTML-Elemente:
<button>,<input type="checkbox">,<input type="radio">und<option>