Псевдокласс CSS :indeterminate

Псевдокласс CSS :indeterminate выделяет элемент пользовательского интерфейса, находящийся в неопределённом состоянии.

Псевдокласс :indeterminate выделяет:

Флажки (<input type="checkbox">), у которых свойство DOM indeterminate установлено в true.
Переключатели (<input type="radio">), когда в группе не выбран ни один вариант.
Элементы прогресса (<progress>), когда атрибут value опущен.

INFO

Состояние :indeterminate в CSS доступно только для чтения. Для флажков оно должно устанавливаться через JavaScript. Переключатели и элементы прогресса отображают это состояние при определённых условиях. При сбросе формы свойство indeterminate флажка сбрасывается.

Псевдокласс :checked используется для стилизации отмеченного состояния флажков и переключателей. Псевдокласс :indeterminate можно комбинировать с другими селекторами, такими как :hover, чтобы применять стили при наведении для элемента в неопределённом состоянии.

Версия

Модуль базового пользовательского интерфейса CSS Level 3

Селекторы CSS Level 4

Отключённые элементы — HTML5

Синтаксис

Пример синтаксиса CSS :indeterminate

css

:indeterminate {
  css declarations;
}

Пример использования селектора :indeterminate:

Пример кода CSS :indeterminate

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      input:indeterminate {
        box-shadow: 0 0 2px 2px #666;
      }
    </style>
  </head>
  <body>
    <h2>Indeterminate selector example</h2>
    <form>
      <input type="checkbox" id="box" /> Checkbox
      <script>
        var checkbox = document.getElementById("box");
        checkbox.indeterminate = true;
      </script>
    </form>
  </body>
</html>

Try it Yourself »

В следующем примере вся группа находится в неопределённом состоянии, когда не выбран ни один вариант.

Пример использования селектора :indeterminate без выбранного варианта:

Ещё один пример кода CSS :indeterminate

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      label {
        margin-right: .5em;
        position: relative;
        top: 1px;
      }
      input[type="radio"]:indeterminate + label {
        color: #8ebf42;
      }
    </style>
  </head>
  <body>
    <h2>:indeterminate selector example</h2>
    <form>
      <input type="radio" name="option" value="yes" id="yes" />
      <label for="yes">Yes</label>
      <input type="radio" name="option" value="no" id="no" />
      <label for="no">No</label>
      <input type="radio" name="option" value="don't know" id="don't-know" />
      <label for="don't-know">Don't know</label>
    </form>
  </body>
</html>

Try it Yourself »

Практика

Какое из следующих утверждений об атрибуте indeterminate в CSS является верным?

Это булев атрибут.Он применяется исключительно к элементу <input>Он не влияет на поведение поля ввода; он лишь изменяет его внешний вид.Он уменьшает непрозрачность элемента ввода.Он может использоваться для флажков и переключателей.Он совместим только с HTML5.

Псевдокласс CSS :indeterminate ​

Версия ​

Синтаксис ​

Пример использования селектора :indeterminate: ​