:indeterminate

:indeterminate ist ein Pseudo-Klassen-Selektor in CSS, benannt nach einem Zustand, der weder ausgewählt noch nicht ausgewählt ist. Es ist dieser Zwischenzustand, den wir als "Vielleicht" zwischen den Optionen "Ja" und "Nein" betrachten könnten. Der Zustand ist nicht vollständig bestimmt, daher der Name: indeterminate (unbestimmt).

Indeterminate Checkboxes (Unbestimmte Checkboxen)

Der häufigste Ort, an dem wir dies in Aktion sehen könnten, sind Checkboxen in einem Formular.

Es gibt ein paar eigenartige Dinge bezüglich :indeterminate, wenn es um Checkboxen geht, die es wert sind, vor dem tieferen Eintauchen in die Auswahl in CSS bemerkt zu werden.

Es kann nicht in HTML gesetzt werden

Zunächst einmal gibt es keine Möglichkeit, eine Checkbox in einem unbestimmten Zustand in HTML zu setzen. Im obigen Eröffnungsbeispiel konnten wir die zweite Checkbox als ausgewählt markieren, indem wir dies explizit in HTML angaben.

<!-- This is checked by default -->
<input type="checkbox" checked="">

Es ist nur logisch anzunehmen, dass wir dasselbe mit einem unbestimmten Zustand tun könnten.

<!-- This does not work! -->
<input type="checkbox" indeterminate="">

Aber leider ist das nicht der Fall, also verwenden Sie dieses letzte Beispiel nicht in Ihrem Code.

Zum Zeitpunkt der Erstellung dieses Textes ist JavaScript das einzige Mittel, um einer Checkbox einen unbestimmten Zustand zuzuweisen. Eine Möglichkeit, dies zu tun, besteht darin, eine bestimmte Checkbox anhand ihrer ID auszuwählen.

var checkbox = document.getElementById("some-checkbox");
checkbox.indeterminate = true;

Die Einschränkung des obigen Beispiels besteht darin, dass die Checkbox nie wieder in einen unbestimmten Zustand gelangen kann, sobald sie in einen anderen Zustand übergeht. Stattdessen können wir zwischen ausgewählten, nicht ausgewählten und unbestimmten Zuständen wechseln.

<!-- Inline click handler, just for demo -->
<input type="checkbox" id="demo" onclick="toggle(this)">

function toggle(demo) {
  if (demo.readOnly) demo.checked=demo.readOnly=false;
  else if (!demo.checked) demo.readOnly=demo.indeterminate=true;
}

Sehen Sie den Pen Rotate Checkbox States von Geoff Graham (@geoffgraham) auf CodePen.

Es ist rein ein visueller Zustand

Eine Checkbox zählt immer noch nur, ob sie ausgewählt oder nicht ausgewählt wurde, unabhängig davon, ob wir einen unbestimmten Zustand aktiviert haben. Anders ausgedrückt, indeterminate maskiert den tatsächlichen Wert der Checkbox und zählt nicht als eigener Wert.

Sein Standardaussehen ist über Browser hinweg inkonsistent

Wie bei numerischen Eingaben (numerischen Eingaben) werden indeterminate Zustände nicht in jedem Browser konsistent gestylt.

Insgesamt ist hier jedoch die Unterstützung für indeterminate Checkboxen.

Indeterminate Radio Buttons (Unbestimmte Radio-Buttons)

:indeterminate kann auf Radio-Buttons auf Gruppenebene angewendet werden, wobei die gesamte Gruppe als unbestimmt gilt, wenn keine Option ausgewählt ist.

Sehen Sie den Pen Inderminate Radio Buttons von Geoff Graham (@geoffgraham) auf CodePen.

Wir sollten anmerken, dass die Verwendung von :indeterminate (möglicherweise nicht die beste Wahl für die Benutzererfahrung ist.

Indeterminate Progress Bars (Unbestimmte Fortschrittsbalken)

Wir können :indeterminate auch auf das <progress></progress>-Element anwenden, wenn in HTML kein Wert explizit gesetzt wurde. Es ist kein JavaScript erforderlich, aber das Stylen des <progress></progress>-Elements ist selbst eine knifflige Sache, die viel Arbeit und Berücksichtigung für Browser-übergreifende Konsistenz erfordert.

Sehen Sie den Pen Indeterminate Progress Element von Geoff Graham (@geoffgraham) auf CodePen.

Browser-Unterstützung

Weitere Informationen

• CSS Selectors Level 4 Working Draft
• Indeterminate Checkboxes (Unbestimmte Checkboxen)
• Indeterminate Radio Buttons (Unbestimmte Radio-Buttons)
• HTML5 Progress Element