: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 Zustand unbestimmt ist, wie z.B. Checkboxen, die mit JavaScript in einen indeterminate Zustand versetzt 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 durch diesen Selektor angesprochen werden, sind:

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

Syntax

css

:indeterminate {
  /* ... */
}

Beispiele

Checkbox & 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 (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
Styling von Webformularen
Die <input type="checkbox"> Eigenschaft indeterminate
<input> und die HTMLInputElement Schnittstelle, die es implementiert.
Der :checked CSS Selektor ermöglicht es, Checkboxen basierend darauf zu stylen, ob sie ausgewählt 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