Псевдокласс :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
Internet Explorer Chrome Opera Safari Firefox Android iOS
9+
к меню ↑

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

Оглавление:
  1. Применить псевдокласс :indeterminate
  2. Псевдокласс :indeterminate для группы чекбоксов
  3. Поддержка
  4. Еще псевдоклассы CSS4