:неопределённое

Базовая Широкодоступная

Эта функция хорошо зарекомендовала себя и работает на многих устройствах и версиях браузеров. Она доступна в браузерах с января 2020 года.

:indeterminate CSS псевдокласс представляет собой любой элемент формы, состояние которого неопределённо, например, флажки, установленные в состояние indeterminate с помощью JavaScript, радиокнопки, являющиеся членами группы, в которой все радиокнопки не выбраны, и элементы <progress> без атрибута value.

/* Selects any <input> whose state is indeterminate */
input:indeterminate {
  background: lime;
}

Элементы, на которые направлен этот селектор:

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

Синтаксис

:indeterminate

Примеры

Флажок и радиокнопка

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

HTML

<fieldset>
  <legend>Checkbox</legend>
  <div>
    <input type="checkbox" id="checkbox" />
    <label for="checkbox">This checkbox label starts out lime.</label>
  </div>
</fieldset>

<fieldset>
  <legend>Radio</legend>
  <div>
    <input type="radio" id="radio1" name="radioButton" value="val1" />
    <label for="radio1">First radio label starts out lime.</label>
  </div>
  <div>
    <input type="radio" id="radio2" name="radioButton" value="val2" />
    <label for="radio2">Second radio label also starts out lime.</label>
  </div>
</fieldset>

CSS

input:indeterminate + label {
  background: lime;
}

JavaScript

const inputs = document.getElementsByTagName("input");

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

Результат

Индикатор выполнения

HTML

<progress></progress>

CSS

progress {
  margin: 4px;
}

progress:indeterminate {
  width: 80vw;
  height: 20px;
}

Результат

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

Спецификация
Стандарт HTML # selector-indeterminate
Уровень 4 селекторов # indeterminate

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

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`:indeterminate`	1	12	2	9	3	18	4	10.1	1	1.0	≤37
`checkbox`	1	12	3.6	10.6	3	18	4	11	1	1.0	≤37
`progress`	6	12	6	15	5.1	18	6	14	5	1.0	37
`radio`	39	79	51	26	10	39	51	26	10	4.0	39

См. также

Веб-формы — Работа с данными пользователей
Стилизация веб-форм
Свойство <input type="checkbox"> элемента indeterminate
<input> и интерфейс HTMLInputElement, который его реализует.
Псевдокласс :checked позволяет стилизовать флажки в зависимости от того, отмечены ли они

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/:indeterminate