Pseudoklasa CSS :indeterminate

Pseudoklasa CSS :indeterminate wybiera elementy formularza, których stan jest nieokreślony, czyli nie da się stwierdzić, czy są włączone, czy wyłączone. Dotyczy więc następujących elementów:

• Pola input typu checkbox, których atrybut IDL indeterminate został ustawiony przez JavaScript na true
• Pola input typu radio należące do grupy przycisków radiowych o takiej samej nazwie, z których żaden nie jest zaznaczony
• Elementy progress pozbawione atrybutu treści value

Przykłady użycia :indeterminate

W poniższym przykładzie domyślnie żaden z przycisków radiowych nie jest zaznaczony, więc znajdują się one w stanie nieokreślonym. Dlatego bezpośrednio po wyświetleniu strony będą miały czerwony obrys. Zniknie on u obu w momencie zaznaczenia jednego z nich przez użytkownika.

Ponadto obrys nie pojawiłby się, gdyby któryś z tych elementów miał zdefiniowany atrybut checked, ponieważ określałby on jego stan.

<style>
  :indeterminate {
    outline: 2px solid red;
  }
</style>
...
<label>A: <input type="radio" name="x" value="a"></label>
<label>B: <input type="radio" name="x" value="b"></label>

Efekt:

Ustawianie atrybutu IDL

Poniżej znajduje się przykład ustawienia atrybutu IDL elementu input typu checkbox na true.

<style>
:indeterminate {
  outline: 2px solid red;
}
</style>
...
<input type="checkbox" id="checkbox" value="x">
...
<script>
  let box = document.getElementById("checkbox");
  box.indeterminate = true;
</script>

To pole wyboru także będzie miało czerwone obramowanie:

Składnia :indeterminate

Składnia pseudoklasy :indeterminate:

:indeterminate {...}