:indeterminate

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

CSS псевдокласс :indeterminate находит элементы в неопределённом состоянии.

css
/* Выбирает все элементы <input>, которые находятся в неопределённом состоянии */
input:indeterminate {
  background: lime;
}

Селектор находит следующие элементы:

  • Элементы <input type="checkbox">, свойство indeterminate которых было установлено в true через JavaScript
  • Элементы <input type="radio">, когда все радио переключатели в одной группе (с одинаковым атрибутом name) не выбраны
  • Элементы <progress> в неопределённом состоянии

Синтаксис

Error: could not find syntax for this item

Примеры

Чекбокс и радио переключатели

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

HTML

html
<div>
  <input type="checkbox" id="checkbox" />
  <label for="checkbox">Эта метка будет зелёной.</label>
</div>
<div>
  <input type="radio" id="radio" />
  <label for="radio">Эта метка будет зелёной.</label>
</div>

CSS

css
input:indeterminate + label {
  background: lime;
}

JavaScript

js
var inputs = document.getElementsByTagName("input");

for (var i = 0; i < inputs.length; i++) {
  inputs[i].indeterminate = true;
}

Полоса прогресса

HTML

html
<progress></progress>

CSS

css
progress {
  margin: 4px;
}

progress:indeterminate {
  opacity: 0.5;
  background-color: lightgray;
  box-shadow: 0 0 2px 1px red;
}

Результат

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

Specification
HTML
# selector-indeterminate
Selectors Level 4
# indeterminate-pseudo

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

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
:indeterminate
Applies to <input type="checkbox"> elements
Applies to <progress> elements
Applies to <input type="radio"> elements

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support