:indeterminate
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 :indeterminate
CSS Pseudoklasse repräsentiert jedes Formularelement, dessen Zustand unbestimmt ist, wie zum Beispiel Checkboxen, die mit JavaScript in einen indeterminate
Zustand versetzt wurden, Radiobuttons, die Mitglieder einer Gruppe sind, in der alle Radiobuttons nicht ausgewählt sind, und <progress>
-Elemente ohne value
-Attribut.
/* Selects any <input> whose state is indeterminate */
input:indeterminate {
background: lime;
}
Von diesem Selektor angesprochene Elemente sind:
<input type="checkbox">
-Elemente, derenindeterminate
-Eigenschaft auftrue
gesetzt ist<input type="radio">
-Elemente, wenn alle Radiobuttons mit gleichemname
-Wert im Formular nicht ausgewählt sind<progress>
-Elemente in einem unbestimmten Zustand
Syntax
:indeterminate
Beispiele
Checkbox & Radiobutton
Dieses Beispiel wendet spezielle Stile auf die Labels an, die mit unbestimmten Formulareingabefeldern verknüpft sind.
HTML
<fieldset>
<legend>Checkbox</legend>
<div>
<input type="checkbox" id="checkbox" />
<label for="checkbox">This checkbox label starts out lime.</label>
</div>
</fieldset>
<fieldset>
<legend>Radio</legend>
<div>
<input type="radio" id="radio1" name="radioButton" value="val1" />
<label for="radio1">First radio label starts out lime.</label>
</div>
<div>
<input type="radio" id="radio2" name="radioButton" value="val2" />
<label for="radio2">Second radio label also starts out lime.</label>
</div>
</fieldset>
CSS
input:indeterminate + label {
background: lime;
}
JavaScript
const inputs = document.getElementsByTagName("input");
for (let i = 0; i < inputs.length; i++) {
inputs[i].indeterminate = true;
}
Ergebnis
Fortschrittsbalken
HTML
<progress></progress>
CSS
progress {
margin: 4px;
}
progress:indeterminate {
width: 80vw;
height: 20px;
}
Ergebnis
Spezifikationen
Specification |
---|
HTML Standard # selector-indeterminate |
Selectors Level 4 # indeterminate |
Browser-Kompatibilität
BCD tables only load in the browser
Siehe auch
- Webformulare — Arbeiten mit Benutzerdaten
- Styling von Webformularen
- Die
<input type="checkbox">
-Eigenschaftindeterminate
<input>
und dasHTMLInputElement
Interface, das es implementiert.- Der
:checked
CSS-Selektor ermöglicht Ihnen, Checkboxen basierend darauf zu stylen, ob sie ausgewählt sind oder nicht.