:indeterminate

Псевдокласс, который отражает неопределённое состояние чекбокса, радиокнопки или прогресс-бара.

Время чтения: меньше 5 мин

Это незавершённая статья. Вы можете помочь её закончить! Почитайте о том, как контрибьютить в Доку.

Кратко

Скопировано

Псевдокласс, который используется для стилизации трёх элементов: чекбоксов, радиокнопок и прогресс-баров.

Пригодится в двух случаях. Во-первых,  для стилизации элементов в их исходном состоянии — при открытии формы или начале загрузки. Во-вторых, для показа пользователю незавершённости процесса выбора или загрузки.

Для чекбоксов и радиокнопок состояние indeterminate не получится присвоить напрямую в HTML, его можно задать только через JavaScript.

Прогресс-бару браузер присваивает :indeterminate автоматически, если не определён атрибут value — процент загрузки.

Примеры

Скопировано
  • <input type="checkbox">, если не все пункты вложенной группы были выделены. Показывает пользователю, что он пока взаимодействовал не со всеми опциями выбора, которые ему предложены.
  • Группа <input type="radio"> с одинаковым атрибутом name, но у которой ни один элемент не установлен в checked. Показывает пользователю, что он пропустил пункт и не выбрал свой вариант.
  • <progress>. Показывает процесс загрузки, но не показывает его прогресс.
Открыть демо в новой вкладке

Как пишется

Скопировано

После селектора, который выбирает элемент прогресс-бара, чекбокса или группу радиокнопок, ставим двоеточие и пишем ключевое слово indeterminate, прописываем стили.

        
          
          input:indeterminate {  opacity: 0.45;}
          input:indeterminate {
  opacity: 0.45;
}

        
        
          
        
      

Как понять

Скопировано

Браузер присваивает чекбоксу или радиокнопке псевдокласс :indeterminate, когда они определены так через JavaScript. Мы можем использовать этот псевдокласс для стилизации нетронутого пользователем элемента формы, подчёркивая незавершённость выбора.

        
          
          const inputs = document.getElementsByTagName('input');for (let i = 0; i < inputs.length; i++) {  inputs[i].indeterminate = true;}
          const inputs = document.getElementsByTagName('input');

for (let i = 0; i < inputs.length; i++) {
  inputs[i].indeterminate = true;
}