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
typucheckbox
, których atrybut IDLindeterminate
został ustawiony przez JavaScript natrue
- Pola
input
typuradio
należące do grupy przycisków radiowych o takiej samej nazwie, z których żaden nie jest zaznaczony - Elementy
progress
pozbawione atrybutu treścivalue
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 {...}