CSS :indeterminate Pseudo-Klasse
Die :indeterminate CSS-Pseudo-Klasse wählt Elemente im unbestimmten Zustand aus. Lesen Sie über die Pseudo-Klasse und üben Sie mit Beispielen.
Die CSS-Pseudo-Klasse :indeterminate trifft Formularsteuerelemente, die sich in einem unbestimmten Zustand befinden — einem dritten Zustand, der weder „ein" noch „aus" ist. Dieses Kapitel erklärt, welche Elemente diesen Zustand annehmen können, wie man ihn auslöst und wie man ihn gestaltet, mit ausführbaren Beispielen für Checkboxen, Radiogruppen und Fortschrittsbalken.
Was „indeterminate" bedeutet
Einige Formularsteuerelemente haben normalerweise zwei Zustände (aktiviert / deaktiviert oder einen bekannten Fortschrittswert). Der unbestimmte Zustand stellt eine dritte „unentschiedene" Bedingung dar. Die Pseudo-Klasse :indeterminate zielt auf drei Arten von Elementen ab:
- Checkboxen (
<input type="checkbox">), deren DOM-Eigenschaftindeterminateauftruegesetzt ist. Dies ist die klassische „Einige, aber nicht alle Unterelemente sind ausgewählt"-Tri-State-Checkbox. - Radiobuttons (
<input type="radio">) — jeder Button in einer gleichnamigen Gruppe wird abgeglichen, solange keine Option in dieser Gruppe ausgewählt ist. - Fortschrittsbalken (
<progress>) ohnevalue-Attribut, was bedeutet, dass die Aufgabenlänge unbekannt ist und der Balken ohne feste Füllung animiert wird.
Der unbestimmte Zustand wird in JavaScript gesetzt, nicht in CSS — man kann ihn nicht allein mit einer CSS-Regel aktivieren. Für Checkboxen setzt man element.indeterminate = true via JavaScript. Das Setzen dieser Eigenschaft ändert checked nicht; beide sind unabhängig voneinander. Das visuelle Aussehen im unbestimmten Zustand (normalerweise ein Strich statt einem Häkchen) und ein :checked-Treffer sind separate Dinge. Das Zurücksetzen des Formulars mit form.reset() setzt das indeterminate-Flag einer Checkbox auf false zurück.
Die Pseudo-Klasse :checked gestaltet den aktivierten Zustand, während :indeterminate den unentschiedenen Zustand gestaltet. Ein Steuerelement kann sich in einem der beiden Zustände befinden oder in keinem, aber niemals in beiden gleichzeitig. Man kann :indeterminate mit anderen Pseudo-Klassen kombinieren, wie z. B. :hover, um ein unbestimmtes Element nur zu gestalten, wenn der Zeiger darüber liegt, oder mit :focus, um es hervorzuheben, wenn es Tastaturfokus erhält.
Syntax
:indeterminate {
/* css declarations */
}Den Selektor auf einen bestimmten Elementtyp beschränken, um unbeabsichtigte Treffer zu vermeiden:
/* Only checkboxes */
input[type="checkbox"]:indeterminate { outline: 2px dashed orange; }
/* Only radio buttons */
input[type="radio"]:indeterminate { opacity: 0.7; }
/* Only progress bars */
progress:indeterminate { opacity: 0.5; }Man kann die Übereinstimmung auch mit :not umkehren, um Steuerelemente zu adressieren, die den unbestimmten Zustand verlassen haben:
/* Style a progress bar once it has a known value */
progress:not(:indeterminate) { border: 2px solid green; }Beispiel: Gestalten einer unbestimmten Checkbox
Eine Checkbox wird nur dann unbestimmt, wenn JavaScript die Eigenschaft indeterminate auf true setzt. Die CSS-Regel greift, sobald diese Eigenschaft gesetzt wird, und erlischt, sobald sie wieder auf false gesetzt wird. Dieses Beispiel hebt das Steuerelement mit einem farbigen box-shadow hervor.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
input:indeterminate {
box-shadow: 0 0 2px 2px #666;
}
</style>
</head>
<body>
<h2>Indeterminate selector example</h2>
<form>
<input type="checkbox" id="box" /> Checkbox
<script>
var checkbox = document.getElementById("box");
checkbox.indeterminate = true;
</script>
</form>
</body>
</html>Häufiger Anwendungsfall: eine „Alle auswählen"-Tri-State-Checkbox
Die praktischste Anwendung von :indeterminate ist eine Master-Checkbox, die eine Liste von Optionen zusammenfasst: aktiviert, wenn alle Kindelemente ausgewählt sind, deaktiviert, wenn keine ausgewählt sind, und unbestimmt, wenn einige ausgewählt sind. Dieses Muster ist in Dateimanagern, E-Mail-Clients und Datentabellen verbreitet.
Die JavaScript-Logik hält die Eigenschaften indeterminate und checked der Master-Checkbox mit den Kinder-Checkboxen synchron. CSS übernimmt den Rest.
<!DOCTYPE html>
<html>
<head>
<title>Tri-state checkbox</title>
<style>
/* Highlight master while in partial-selection state */
#all:indeterminate {
outline: 2px solid #8ebf42;
}
</style>
</head>
<body>
<label><input type="checkbox" id="all" /> Select all</label>
<ul>
<li><label><input type="checkbox" class="child" /> Apples</label></li>
<li><label><input type="checkbox" class="child" /> Bananas</label></li>
<li><label><input type="checkbox" class="child" /> Cherries</label></li>
</ul>
<script>
var all = document.getElementById("all");
var children = document.querySelectorAll(".child");
function syncParent() {
var checked = [...children].filter(function (c) { return c.checked; }).length;
all.checked = checked === children.length;
all.indeterminate = checked > 0 && checked < children.length;
}
all.addEventListener("change", function () {
children.forEach(function (c) { c.checked = all.checked; });
});
children.forEach(function (c) {
c.addEventListener("change", syncParent);
});
syncParent();
</script>
</body>
</html>Eine der Kinder-Checkboxen aktivieren: die Checkbox „Alle auswählen" wird unbestimmt und die grüne Umrandung erscheint. Alle drei aktivieren: die Umrandung verschwindet und sie wechselt in den vollständig aktivierten Zustand.
Beispiel: eine unbestimmte Radiogruppe
Eine Radiogruppe befindet sich im unbestimmten Zustand, solange keine ihrer Optionen ausgewählt ist. Die Pseudo-Klasse :indeterminate trifft jedes <input type="radio"> in der Gruppe, bis der Benutzer eine Antwort auswählt. Sobald eine Option gewählt wurde, verlässt die gesamte Gruppe den unbestimmten Zustand und die Formatierung wird entfernt.
Dies ist nützlich, um Benutzer zur Auswahl aufzufordern — beispielsweise kann es bei der Formularvalidierung zusammen mit :invalid und :valid eingesetzt werden, um Benutzer visuell zu unbeantworteten Pflichtfragen zu führen.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
label {
margin-right: .5em;
position: relative;
top: 1px;
}
input[type="radio"]:indeterminate + label {
color: #8ebf42;
}
</style>
</head>
<body>
<h2>:indeterminate selector example</h2>
<form>
<input type="radio" name="option" value="yes" id="yes" />
<label for="yes">Yes</label>
<input type="radio" name="option" value="no" id="no" />
<label for="no">No</label>
<input type="radio" name="option" value="dont-know" id="dont-know" />
<label for="dont-know">Don’t know</label>
</form>
</body>
</html>Beispiel: ein unbestimmter Fortschrittsbalken
Ein <progress>-Element ohne value-Attribut hat keinen bekannten Fertigstellungsprozentsatz und trifft daher :indeterminate. Browser rendern standardmäßig einen animierten „Arbeits"-Balken. Das Hinzufügen eines value-Attributs (und optional max) versetzt das Element in den bestimmten Zustand und die CSS-Regel greift nicht mehr.
<!DOCTYPE html>
<html>
<head>
<title>Indeterminate progress</title>
<style>
progress:indeterminate {
opacity: 0.6;
width: 200px;
}
/* Once a value is set, show a green accent */
progress:not(:indeterminate) {
accent-color: #2a9d8f;
width: 200px;
}
</style>
</head>
<body>
<p>Indeterminate (no value): <progress></progress></p>
<p>Determinate (value set): <progress value="60" max="100"></progress></p>
</body>
</html>Die Eigenschaft accent-color steuert die Füllfarbe von <progress> in Browsern, die sie unterstützen (Chrome 93+, Firefox 92+, Safari 15.4+). Für ältere Browser-Unterstützung sind möglicherweise herstellerspezifische Pseudo-Elemente wie ::-webkit-progress-bar und ::-moz-progress-bar erforderlich, die jedoch nicht Teil der Standard-CSS-Spezifikation sind.
Kombination mit anderen Pseudo-Klassen
:indeterminate kann mit anderen Zustands-Pseudo-Klassen verkettet werden, um präzise Selektoren zu erstellen:
/* Indeterminate checkbox that is also focused */
input[type="checkbox"]:indeterminate:focus {
outline: 3px solid royalblue;
}
/* Indeterminate and disabled checkbox — show a muted style */
input[type="checkbox"]:indeterminate:disabled {
opacity: 0.4;
cursor: not-allowed;
}Weitere Details zu diesen Pseudo-Klassen finden Sie unter :focus, :disabled und :enabled.
Barrierefreiheit
Das indeterminate-Flag ist auf CSS-Ebene rein visuell; es ändert den mit dem Formular übermittelten Wert nicht. Eine Tri-State-Checkbox wird je nach aktuellem checked-Zustand entweder als aktiviert oder deaktiviert übermittelt.
Für Hilfstechnologien muss der dritte Zustand explizit über das Attribut aria-checked="mixed" am Master-Steuerelement angegeben werden. Ohne dieses Attribut kündigen Screenreader das Steuerelement schlicht als aktiviert oder deaktiviert an, und Benutzer, die auf AT angewiesen sind, erfahren nicht die Bedeutung der Teilauswahl.
<!-- Accessible tri-state master checkbox -->
<input
type="checkbox"
id="all"
aria-checked="mixed"
aria-label="Select all items"
/>aria-checked in JavaScript synchron mit der Eigenschaft indeterminate halten:
function syncParent() {
var checked = [...children].filter(function (c) { return c.checked; }).length;
if (checked === 0) {
all.indeterminate = false;
all.checked = false;
all.setAttribute("aria-checked", "false");
} else if (checked === children.length) {
all.indeterminate = false;
all.checked = true;
all.setAttribute("aria-checked", "true");
} else {
all.indeterminate = true;
all.checked = false;
all.setAttribute("aria-checked", "mixed");
}
}Bei :required-Radiogruppen, in denen keine Option ausgewählt wurde, sollte auch aria-required="true" für jedes Input verwendet werden, damit Hilfstechnologien die unbeantwortete Gruppe identifizieren können.
Browser-Unterstützung
Die Pseudo-Klasse :indeterminate wird von allen modernen Browsern unterstützt (Chrome, Edge, Firefox, Safari). Alle drei Elementtypen — Checkboxen, Radiogruppen und Fortschrittsbalken — werden in aktuellen Browser-Versionen abgeglichen.
| Element | Hinweise |
|---|---|
input[type="checkbox"]:indeterminate | Wird in allen modernen Browsern unterstützt. Erfordert JS, um die Eigenschaft indeterminate zu setzen. |
input[type="radio"]:indeterminate | Wird in allen modernen Browsern unterstützt. Wird automatisch angewendet, bis der Benutzer eine Option auswählt. |
progress:indeterminate | Wird in allen modernen Browsern unterstützt. Wird automatisch angewendet, wenn das value-Attribut fehlt. |