W3docs
de
Anmelden

CSS :indeterminate-Pseudoklasse

The :indeterminate CSS pseudo-class selects the elements that are in an indeterminate state. Read about the pseudo-class & practice with examples.

Die CSS-Pseudoklasse :indeterminate wählt ein Benutzeroberflächenelement aus, das sich in einem unbestimmten Zustand befindet.

Die :indeterminate-Pseudoklasse wählt Folgendes aus:

  • Kontrollkästchen (<input type="checkbox">), bei denen die DOM-Eigenschaft indeterminate auf true gesetzt ist.
  • Optionsfelder (<input type="radio">), wenn keine Option in der Gruppe ausgewählt ist.
  • Fortschrittsbalken (<progress>), wenn das Attribut value weggelassen wird.

info

Der :indeterminate-Zustand ist in CSS schreibgeschützt. Bei Kontrollkästchen muss er über JavaScript festgelegt werden. Optionsfelder und Fortschrittsbalken zeigen diesen Zustand unter bestimmten Bedingungen an. Wenn ein Formular zurückgesetzt wird, wird die indeterminate-Eigenschaft eines Kontrollkästchens zurückgesetzt.

Die Pseudoklasse :checked dient zum Stylen des ausgewählten Zustands von Kontrollkästchen und Optionsfeldern. Die Pseudoklasse :indeterminate kann mit anderen Selektoren wie :hover verknüpft werden, um Hover-Stile für Elemente im unbestimmten Zustand bereitzustellen.

Version

CSS Basic User Interface Module Level 3

CSS Selectors Level 4

Disabled Elements — HTML5

Syntax

CSS :indeterminate Syntaxbeispiel

:indeterminate {
  css declarations;
}

Beispiel für den :indeterminate-Selektor:

CSS :indeterminate Codebeispiel

<!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>
Probier es selbst »

Im folgenden Beispiel befindet sich die gesamte Gruppe in einem unbestimmten Zustand, wenn keine Option ausgewählt ist.

Beispiel für den :indeterminate-Selektor ohne ausgewählte Option:

CSS :indeterminate weiteres Codebeispiel

<!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="don't know" id="don't-know" />
      <label for="don't-know">Don't know</label>
    </form>
  </body>
</html>
Probier es selbst »

Übungen

Übung

Welche der folgenden Aussagen zum indeterminate-Attribut in CSS ist korrekt?