:indeterminate

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' в этой спецификации.
Рекомендация Определён псевдо-класс, но не семантика.

Поддержка браузерами

Update compatibility data on GitHub
КомпьютерыМобильные
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome для AndroidFirefox для AndroidOpera для AndroidSafari on iOSSamsung Internet
:indeterminateChrome Полная поддержка 1Edge Полная поддержка 12Firefox Полная поддержка 2IE Полная поддержка 10Opera Полная поддержка ДаSafari Полная поддержка 3WebView Android Полная поддержка ≤37Chrome Android Полная поддержка 18Firefox Android Полная поддержка 4Opera Android Полная поддержка ДаSafari iOS Полная поддержка 1Samsung Internet Android Полная поддержка 1.0
type="checkbox"Chrome Полная поддержка 1Edge Полная поддержка 12Firefox Полная поддержка 3.6IE Полная поддержка 10Opera Полная поддержка 10.6Safari Полная поддержка 3WebView Android Полная поддержка ≤37Chrome Android Полная поддержка 18Firefox Android Полная поддержка 4Opera Android Полная поддержка 11Safari iOS Полная поддержка 1Samsung Internet Android Полная поддержка 1.0
<progress>Chrome Полная поддержка 6Edge Полная поддержка 12Firefox Полная поддержка 6IE Полная поддержка 10Opera Полная поддержка 15Safari Полная поддержка 5.1WebView Android Полная поддержка 37Chrome Android Полная поддержка 18Firefox Android Полная поддержка 6Opera Android Полная поддержка 14Safari iOS Полная поддержка 5Samsung Internet Android Полная поддержка 1.0
type="radio"Chrome Полная поддержка 39Edge Нет поддержки Нет
Замечания
Нет поддержки Нет
Замечания
Замечания See Edge bug 7124038.
Firefox Полная поддержка 51IE Нет поддержки НетOpera Полная поддержка 26Safari Нет поддержки Нет
Замечания
Нет поддержки Нет
Замечания
Замечания See WebKit bug 156270.
WebView Android Полная поддержка 39Chrome Android Полная поддержка 39Firefox Android Полная поддержка 51Opera Android ? Safari iOS Нет поддержки Нет
Замечания
Нет поддержки Нет
Замечания
Замечания See WebKit bug 156270.
Samsung Internet Android ?

Легенда

Полная поддержка  
Полная поддержка
Нет поддержки  
Нет поддержки
Совместимость неизвестна  
Совместимость неизвестна
Смотрите замечания реализации.
Смотрите замечания реализации.