: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 Полная поддержка 9Safari Полная поддержка 3WebView Android Полная поддержка ≤37Chrome Android Полная поддержка 18Firefox Android Полная поддержка 4Opera Android Полная поддержка 10.1Safari iOS Полная поддержка 1Samsung Internet Android Полная поддержка 1.0
Applies to <input type="checkbox"> elementsChrome Полная поддержка 1Edge Полная поддержка 12Firefox Полная поддержка 3.6IE Полная поддержка 10Opera Полная поддержка 10.6Safari Полная поддержка 3WebView Android Полная поддержка ≤37Chrome Android Полная поддержка 18Firefox Android Полная поддержка 4Opera Android Полная поддержка 11Safari iOS Полная поддержка 1Samsung Internet Android Полная поддержка 1.0
Applies to <progress> elementsChrome Полная поддержка 6Edge Полная поддержка 12Firefox Полная поддержка 6IE Полная поддержка 10Opera Полная поддержка 15Safari Полная поддержка 5.1WebView Android Полная поддержка 37Chrome Android Полная поддержка 18Firefox Android Полная поддержка 6Opera Android Полная поддержка 14Safari iOS Полная поддержка 5Samsung Internet Android Полная поддержка 1.0
Applies to <input type="radio"> elementsChrome Полная поддержка 39Edge Полная поддержка 79Firefox Полная поддержка 51IE Нет поддержки НетOpera Полная поддержка 26Safari Нет поддержки Нет
Замечания
Нет поддержки Нет
Замечания
Замечания See WebKit bug 156270.
WebView Android Полная поддержка 39Chrome Android Полная поддержка 39Firefox Android Полная поддержка 51Opera Android Полная поддержка 26Safari iOS Нет поддержки Нет
Замечания
Нет поддержки Нет
Замечания
Замечания See WebKit bug 156270.
Samsung Internet Android Полная поддержка 4.0

Легенда

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