: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:

<input type="checkbox">-Elemente mit der indeterminate-Eigenschaft auf true gesetzt.
<input type="radio">-Elemente mit dem gleichen name-Wert, wobei keines von ihnen checked ist.
<progress>-Elemente ohne value, die sich dadurch in einem unbestimmten Zustand befinden.

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

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

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
Stilisierung von Webformularen
Die indeterminate-Eigenschaft des <input type="checkbox">-Elements
<input> und die HTMLInputElement-Schnittstelle, die es implementiert.
Der :checked CSS-Selektor, mit dem Sie Kontrollkästchen basierend darauf stylen können, ob sie ausgewählt sind oder nicht.