:indeterminate

Baseline Widely available

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

Die :indeterminate CSS Pseudoklasse repräsentiert jedes Formularelement, dessen Zustand unbestimmt ist, wie beispielsweise Kontrollkästchen, die mithilfe von JavaScript in einen indeterminate-Zustand versetzt wurden, Radiobuttons, die Teil einer Gruppe sind, in der keine Radiobuttons ausgewählt sind, und <progress>-Elemente ohne value-Attribut.

css

/* Selects any <input> whose state is indeterminate */
input:indeterminate {
  background: lime;
}

Von diesem Selektor anvisierte Elemente sind:

<input type="checkbox">-Elemente, deren indeterminate-Eigenschaft auf true gesetzt ist
<input type="radio">-Elemente, wenn alle Radiobuttons mit demselben name-Wert im Formular nicht ausgewählt sind
<progress>-Elemente in einem unbestimmten Zustand

Syntax

:indeterminate

Beispiele

Kontrollkästchen & Radiobuttons

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;
}

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 (let i = 0; i < inputs.length; i++) {
  inputs[i].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

BCD tables only load in the browser

Siehe auch

Web-Formulare — Arbeiten mit Benutzerdaten
Styling von Web-Formularen
Die <input type="checkbox">-Eigenschaft indeterminate
<input> und die HTMLInputElement-Schnittstelle, die sie implementiert.
Der :checked CSS-Selektor ermöglicht es, Kontrollkästchen basierend darauf zu stylen, ob sie ausgewählt sind oder nicht.