:indeterminate CSS-Pseudoklasse
Baseline
Weitgehend verfügbar
Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Juli 2015 browserübergreifend verfügbar.
Die :indeterminate CSS Pseudoklasse repräsentiert jedes Formularelement, dessen Zustand unbestimmt ist, wie z.B. Kontrollkästchen, die mit JavaScript in einen indeterminate-Zustand versetzt wurden, Optionsfelder, die Mitglieder einer Gruppe sind, in der alle Optionsfelder nicht angekreuzt sind, und <progress>-Elemente ohne value-Attribut.
css
/* Selects any <input> whose state is indeterminate */
input:indeterminate {
background: lime;
}
Elemente, die durch diesen Selektor angesprochen werden, sind:
<input type="checkbox">-Elemente mit derindeterminate-Eigenschaft auftruegesetzt.<input type="radio">-Elemente mit demselbenname-Wert, von denen keinescheckedist.<progress>-Elemente ohnevalue, die somit in einem unbestimmten Zustand sind.
Syntax
css
:indeterminate {
/* ... */
}
Beispiele
Kontrollkästchen & Optionsfeld
Dieses Beispiel wendet spezielle Stile auf die Labels an, die mit unbestimmten Formularfeldern verbunden sind.
HTML
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
css
input:indeterminate + label {
background: lime;
}
JavaScript
js
const inputs = document.getElementsByTagName("input");
for (const input of inputs) {
input.indeterminate = true;
}
Ergebnis
Fortschrittsbalken
HTML
html
<progress></progress>
CSS
css
progress {
margin: 4px;
}
progress:indeterminate {
width: 80vw;
height: 20px;
}
Ergebnis
Spezifikationen
| Spezifikation |
|---|
| HTML # selector-indeterminate |
| Selectors Level 4 # indeterminate-pseudo |
Browser-Kompatibilität
Siehe auch
- Web-Formulare — Arbeiten mit Benutzerdaten
- Styling von Web-Formularen
- Die
<input type="checkbox">-Eigenschaftindeterminate <input>und dieHTMLInputElement-Schnittstelle, die es implementiert.- Der
:checkedCSS-Selektor ermöglicht es Ihnen, Kontrollkästchen basierend darauf zu stylen, ob sie angekreuzt sind oder nicht.