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:indeterminateCSSPseudoklasse repräsentiert jedes Formularelement, dessen Zustand unbestimmt ist, wie z.B. Checkboxen, die mit JavaScript in einenindeterminate Zustand versetzt wurden, Radiobuttons, die Mitglied einer Gruppe sind, in der alle Radiobuttons nicht ausgewählt sind, und<progress> Elemente ohnevalue Attribut.
/* 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
:indeterminate { /* ... */}Beispiele
Checkbox & Radiobutton
Dieses Beispiel wendet spezielle Stile auf die Labels an, die mit unbestimmten Formularfeldern verknüpft sind.
HTML
<fieldset> <legend>Checkbox</legend> <div> <input type="checkbox" /> <label for="checkbox">This checkbox label starts out lime.</label> </div></fieldset><fieldset> <legend>Radio</legend> <div> <input type="radio" name="radioButton" value="val1" /> <label for="radio1">First radio label starts out lime.</label> </div> <div> <input type="radio" 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
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.