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

:indeterminate CSS псевдокласс обозначает любой элемент формы, состояние которого неопределённо: например, флажки, для которых с помощью JavaScript задано состояние indeterminate, переключатели, входящие в группу, в которой ни один переключатель не выбран, и элементы <progress> без атрибута value.

/* Selects any <input> whose state is indeterminate */
input:indeterminate {
  background: lime;
}

К этому селектору относятся следующие элементы:

• элементы <input type="checkbox">, для которых свойству indeterminate задано значение true.
• элементы <input type="radio"> с одинаковым значением name, если ни один из них не checked.
• элементы <progress> без атрибута value, что помещает их в неопределённое состояние.

Синтаксис

:indeterminate {
  /* ... */
}

Примеры

Флажок и переключатель

В этом примере к меткам, связанным с полями формы в неопределённом состоянии, применяются специальные стили.

HTML

<fieldset>
  <legend>Checkbox</legend>
  <div>
    <input type="checkbox" id="checkbox" />
    <label for="checkbox">This checkbox label starts out lime.</label>
  </div>
</fieldset>

<fieldset>
  <legend>Radio</legend>
  <div>
    <input type="radio" id="radio1" name="radioButton" value="val1" />
    <label for="radio1">First radio label starts out lime.</label>
  </div>
  <div>
    <input type="radio" id="radio2" name="radioButton" value="val2" />
    <label for="radio2">Second radio label also starts out lime.</label>
  </div>
</fieldset>

CSS

input:indeterminate + label {
  background: lime;
}

fieldset {
  padding: 1em 0.75em;
}

fieldset:first-of-type {
  margin-bottom: 1.5rem;
}

fieldset:not(:first-of-type) > div:not(:last-child) {
  margin-bottom: 0.5rem;
}

JavaScript

const inputs = document.getElementsByTagName("input");

for (const input of inputs) {
  input.indeterminate = true;
}

Результат

Индикатор выполнения

HTML

<progress></progress>

CSS

progress {
  margin: 4px;
}

progress:indeterminate {
  width: 80vw;
  height: 20px;
}

Результат

Спецификации

Совместимость с браузерами

См. также

• Веб-формы — работа с пользовательскими данными
• Стилизация веб-форм
• Свойство indeterminate элемента <input type="checkbox">
• <input> и реализующий его интерфейс HTMLInputElement.
• Селектор CSS :checked позволяет задавать стили флажкам в зависимости от того, выбраны они или нет