CSS псевдо-класс :indeterminate
находит элементы в неопределённом состоянии.
/* Выбирает все элементы <input>, которые находятся в неопределенном состоянии */
input:indeterminate {
background: lime;
}
Селектор находит следующие элементы:
- Элементы
<input type="checkbox">
, свойствоindeterminate
которых было установлено вtrue
через JavaScript - Элементы
<input type="radio">
, когда все радио переключатели в одной группе (с одинаковым атрибутомname
) невыбраны - Элементы
<progress>
в неопределённом состоянии
Синтаксис
:indeterminate
Примеры
Чекбокс и радио переключатели
В этом примере специальные стили применяются к меткам, которые привязаны к неопределенным полям формы.
HTML
<div>
<input type="checkbox" id="checkbox">
<label for="checkbox">Эта метка будет зелёной.</label>
</div>
<div>
<input type="radio" id="radio">
<label for="radio">Эта метка будет зелёной.</label>
</div>
CSS
input:indeterminate + label {
background: lime;
}
JavaScript
var inputs = document.getElementsByTagName("input");
for (var i = 0; i < inputs.length; i++) {
inputs[i].indeterminate = true;
}
Полоса прогресса
HTML
<progress>
CSS
progress {
margin: 4px;
}
progress:indeterminate {
opacity: 0.5;
background-color: lightgray;
box-shadow: 0 0 2px 1px red;
}
Результат
Спецификации
Спецификация | Статус | Комментарий |
---|---|---|
HTML Living Standard Определение ':indeterminate' в этой спецификации. |
Живой стандарт | Нет изменений. |
HTML5 Определение ':indeterminate' в этой спецификации. |
Рекомендация | Определение семантики HTML и проверки. |
Selectors Level 4 Определение ':indeterminate' в этой спецификации. |
Рабочий черновик | Нет изменений. |
CSS Basic User Interface Module Level 3 Определение ':indeterminate' в этой спецификации. |
Рекомендация | Определён псевдо-класс, но не семантика. |
Поддержка браузерами
BCD tables only load in the browser