:indeterminate
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since Juli 2015.
Die :indeterminate CSS Pseudoklasse repräsentiert jedes Formularelement, dessen Zustand unbestimmt ist, wie z.B. Checkboxen, die mit JavaScript in einen indeterminate Zustand versetzt wurden, Radiobuttons, die Mitglied einer Gruppe sind, in der alle Radiobuttons nicht ausgewählt 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 derindeterminateEigenschaft auftruegesetzt.<input type="radio">Elemente mit demselbennameWert, von denen keinescheckedist.<progress>Elemente ohnevalue, die sich dadurch in einem unbestimmten Zustand befinden.
Syntax
css
:indeterminate { /* ... */ } Beispiele
Checkbox & Radiobutton
Dieses Beispiel wendet spezielle Stile auf die Labels an, die mit unbestimmten Formularfeldern verknüpft 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
| Specification |
|---|
| HTML # selector-indeterminate |
| Selectors Level 4 # indeterminate-pseudo |
Browser-Kompatibilität
Loading…
Siehe auch
- Webformulare — Arbeiten mit Benutzerdaten
- Styling von Webformularen
- Die
<input type="checkbox">Eigenschaftindeterminate <input>und dieHTMLInputElementSchnittstelle, die es implementiert.- Der
:checkedCSS Selektor ermöglicht es, Checkboxen basierend darauf zu stylen, ob sie ausgewählt sind oder nicht.