Псевдокласс :indeterminate

Псевдокласс :indeterminate применяет стиль для переключателей веб-формы до установки флажка/галочки.

Применить псевдокласс :indeterminate

До установки флажка, чекбокс находится в неопределенном состоянии.

HTML

<input name="test" type="checkbox" />
<label for="test">чекбокс</label>

JavaScript для :indeterminate

document.getElementsByTagName("input")[0].indeterminate = true;

CSS

:indeterminate, :indeterminate + label:after {
  content: ' - Неопределенное состояние';
}

Псевдокласс :indeterminate для группы чекбоксов

Для доступа к группы чекбоксов применяется метод DOM getElementById().

HTML

<div id="checkbox-list">
    <input name="group" id="one" type="checkbox">
    <label for="one">чекбокс 1</label>

    <input name="group" id="two" type="checkbox">
    <label for="two">чекбокс 2</label>

    <input name="group" id="three" type="checkbox">
    <label for="three">чекбокс 3</label>
</div>

JavaScript для :indeterminate

var x = document.getElementById("checkbox-list");
var y = x.getElementsByTagName("*");
var i;
for (i = 0; i < y.length; i++) { 
   y[i].indeterminate = true; 
}

CSS

:indeterminate, :indeterminate + label:after {
  content: ' - Неопределенное состояние';
}

Поддержка

Псевдокласс :indeterminate является селектором четвёртого уровня CSS4, и хорошо поддерживается браузерами. В зависимости от браузера, вид переключателя с псевдоклассом :indeterminate может отличатся.

Таблица поддержки браузерами: “Псевдокласс :indeterminate”

Еще псевдоклассы CSS4