Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten. Erfahre mehr über dieses Experiment.
:default CSS-Pseudoklasse
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 standardmäßig in einer Gruppe von zusammenhängenden Elementen sind.
Probieren Sie es aus
label,
input[type="submit"] {
display: block;
margin-top: 1em;
}
input:default {
border: none;
outline: 2px solid deeppink;
}
<form>
<p>How did you find out about us?</p>
<label
><input name="origin" type="radio" value="google" checked /> Google</label
>
<label><input name="origin" type="radio" value="facebook" /> Facebook</label>
<p>Please agree to our terms:</p>
<label
><input name="newsletter" type="checkbox" checked /> I want to subscribe to
a personalized newsletter.</label
>
<label
><input name="privacy" type="checkbox" /> I have read and I agree to the
Privacy Policy.</label
>
<input type="submit" value="Submit form" />
</form>
Was dieser Selektor auswählt, ist im HTML Standard §4.16.3 Pseudo-classes definiert — er kann die <button>, <input type="checkbox">, <input type="radio"> und <option> Elemente auswählen:
- Ein Standard-Optionselement ist das erste mit dem
selected-Attribut, oder die erste aktivierte Option in der DOM-Reihenfolge.multiple<select>s können mehr als eineselectedAuswahl haben, daher werden alle mit:defaultübereinstimmen. <input type="checkbox">und<input type="radio">stimmen überein, wenn sie daschecked-Attribut haben.<button>stimmt überein, wenn es der Standard-Übermittlungsbutton eines<form>ist: der erste<button>in der DOM-Reihenfolge, der zum Formular gehört. Dies gilt auch für<input>-Typen, die Formulare übermitteln, wieimageodersubmit.
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
JavaScript aktivieren, um diese Browser-Kompatibilitätstabelle anzuzeigen.
Siehe auch
- Webformulare — Arbeiten mit Benutzerdaten
- Styling von Webformularen
- Verwandte HTML-Elemente:
<button>,<input type="checkbox">,<input type="radio">, und<option>