: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 z. B. Kontrollkästchen, die mit JavaScript in einen indeterminate-Zustand gesetzt 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 von diesem Selektor angesprochen werden, sind:

<input type="checkbox">-Elemente mit der indeterminate-Eigenschaft, die auf true gesetzt ist.
<input type="radio">-Elemente mit demselben name-Wert, bei denen keiner ein checked-Attribut hat.
<progress>-Elemente ohne value, die sich in einem unbestimmten Zustand befinden.

Syntax

css

:indeterminate {
  /* ... */
}

Beispiele

Kontrollkästchen & 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;
}

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

Siehe auch

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