:indeterminate

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Die :indeterminate CSS Pseudoklasse repräsentiert jedes Formularelement, dessen Zustand unbestimmt ist, wie beispielsweise Kontrollkästchen, die mithilfe von JavaScript auf einen indeterminate-Zustand gesetzt wurden, Radioboxen, die Mitglieder 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:

Syntax

css
:indeterminate { /* ... */ }

Beispiele

Kontrollkästchen & Radiobox

Dieses Beispiel wendet besondere 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

Specification
HTML
# selector-indeterminate
Selectors Level 4
# indeterminate-pseudo

Browser-Kompatibilität

Siehe auch