CSS :indeterminate-Pseudoklasse

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

css

:indeterminate {
  css declarations;
}

Beispiel für den :indeterminate-Selektor:

CSS :indeterminate Codebeispiel

html

<!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>

Try it Yourself »

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

html

<!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>

Try it Yourself »

Übungen

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

Es ist ein boolesches Attribut.Es gilt ausschließlich für das <input>-ElementEs hat keinen Einfluss auf das Verhalten des Eingabefelds; es ändert nur das Aussehen.Es reduziert die Deckkraft des Eingabefelds.Es kann für Kontrollkästchen und Optionsfelder verwendet werden.Es ist nur mit HTML5 kompatibel.

CSS :indeterminate-Pseudoklasse ​

Version ​

Syntax ​

Beispiel für den :indeterminate-Selektor: ​