: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 :indeterminate CSS Pseudoklasse repräsentiert jedes Formularelement, dessen Status unbestimmt ist, wie z.B. Kontrollkästchen, die mit JavaScript in einen indeterminate-Zustand versetzt wurden, Optionsschaltflächen, die Mitglieder einer Gruppe sind, in der alle Optionsschaltflächen deaktiviert 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 auf true gesetzt.
<input type="radio">-Elemente mit dem gleichen name-Wert und ohne checked.
<progress>-Elemente ohne value, die sie in einen unbestimmten Zustand versetzen.

Syntax

css

:indeterminate {
  /* ... */
}

Beispiele

Kontrollkästchen & Optionsschaltflächen

Dieses Beispiel wendet spezielle Stile auf die Labels zu, die mit unbestimmten Formularelementen 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
Stil von Webformularen
Die <input type="checkbox">-Elementeigenschaft indeterminate
<input> und die HTMLInputElement Schnittstelle, die sie implementiert.
Der :checked CSS-Selektor lässt Sie Kontrollkästchen basierend darauf stylen, ob sie aktiviert sind oder nicht.

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden