:indeterminate

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

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

Для чекбоксов и радиокнопок состояние 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;
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать