: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.

We’d love to hear your thoughts on the next set of proposals for the JavaScript language. You can find a description of the proposals here.
Please take two minutes to fill out our short survey.

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

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