Перевод не завершен. Пожалуйста, помогите перевести эту статью с английского.

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

Результат

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

Specification Status Comment
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 для AndroidEdge MobileFirefox для AndroidOpera для AndroidSafari on iOSSamsung Internet
Базовая поддержкаChrome Полная поддержка ДаEdge Полная поддержка ДаFirefox Полная поддержка ДаIE Полная поддержка ДаOpera Полная поддержка ДаSafari Полная поддержка ДаWebView Android ? Chrome Android ? Edge Mobile Полная поддержка ДаFirefox Android Полная поддержка ДаOpera Android ? Safari iOS ? Samsung Internet Android ?
type="checkbox"Chrome ? Edge Полная поддержка ДаFirefox Полная поддержка 3.6IE Полная поддержка 9Opera Полная поддержка 10.6Safari Полная поддержка 3WebView Android ? Chrome Android ? Edge Mobile Полная поддержка ДаFirefox Android Полная поддержка 4Opera Android ? Safari iOS ? Samsung Internet Android ?
type="radio"Chrome Полная поддержка 39Edge Нет поддержки Нет
Замечания
Нет поддержки Нет
Замечания
Замечания See Edge bug 7124038.
Firefox Полная поддержка 51IE Нет поддержки НетOpera ? Safari Нет поддержки Нет
Замечания
Нет поддержки Нет
Замечания
Замечания See WebKit bug 156270.
WebView Android Полная поддержка 39Chrome Android ? Edge Mobile Нет поддержки Нет
Замечания
Нет поддержки Нет
Замечания
Замечания See Edge bug 7124038.
Firefox Android Полная поддержка 51Opera Android ? Safari iOS Нет поддержки Нет
Замечания
Нет поддержки Нет
Замечания
Замечания See WebKit bug 156270.
Samsung Internet Android ?
<progress>Chrome Полная поддержка 6Edge Полная поддержка ДаFirefox Полная поддержка 6IE Полная поддержка 10Opera ? Safari Полная поддержка ДаWebView Android ? Chrome Android ? Edge Mobile Полная поддержка ДаFirefox Android Полная поддержка 6Opera Android ? Safari iOS ? Samsung Internet Android ?

Легенда

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

Метки документа и участники

Внесли вклад в эту страницу: ialexi-bl
Обновлялась последний раз: ialexi-bl,