Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten. Erfahre mehr über dieses Experiment.
: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 Status unbestimmt ist, wie z.B. Kontrollkästchen, die mit JavaScript in einen indeterminate-Zustand versetzt wurden, Optionsschaltflächen, die Mitglieder einer Gruppe sind, in der alle Optionsschaltflächen deaktiviert sind, und <progress>-Elemente ohne value-Attribut.
/* Selects any <input> whose state is indeterminate */
input:indeterminate {
background: lime;
}
Elemente, die von diesem Selektor angesprochen werden, sind:
<input type="checkbox">-Elemente mit derindeterminate-Eigenschaft auftruegesetzt.<input type="radio">-Elemente mit dem gleichenname-Wert und ohnechecked.<progress>-Elemente ohnevalue, die sie in einen unbestimmten Zustand versetzen.
Syntax
:indeterminate {
/* ... */
}
Beispiele
Kontrollkästchen & Optionsschaltflächen
Dieses Beispiel wendet spezielle Stile auf die Labels zu, die mit unbestimmten Formularelementen verbunden 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;
}
fieldset {
padding: 1em 0.75em;
}
fieldset:first-of-type {
margin-bottom: 1.5rem;
}
fieldset:not(:first-of-type) > div:not(:last-child) {
margin-bottom: 0.5rem;
}
JavaScript
const inputs = document.getElementsByTagName("input");
for (const input of inputs) {
input.indeterminate = true;
}
Ergebnis
Fortschrittsbalken
HTML
<progress></progress>
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
- Stil von Webformularen
- Die
<input type="checkbox">-Elementeigenschaftindeterminate <input>und dieHTMLInputElementSchnittstelle, die sie implementiert.- Der
:checkedCSS-Selektor lässt Sie Kontrollkästchen basierend darauf stylen, ob sie aktiviert sind oder nicht.