/ ↲
    Расширенный поиск

    CSS

    :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;
}

    Читайте также