:indeterminate

Псевдоклас CSS :indeterminate (невизначене) представляє будь-який елемент форми, чий стан – невизначений, наприклад, поля для галочки, які мають стан indeterminate, заданий за допомогою JavaScript, кнопки-перемикачі, які є членами групи, в якій всі кнопки-перемикачі не вибрані, та елементи <progress> без атрибута value.

/* Вибирає всі елементи <input>, стан яких є невизначеним */
input:indeterminate {
  background: lime;
}

Елементи, на які націлюється цей селектор:

• Елементи <input type="checkbox">, чиїй властивості indeterminate задано значення true
• Елементи <input type="radio">, коли всі радіокнопки з однаковим значенням name в формі не вибрані
• Елементи <progress> у невизначеному стані

Синтаксис

:indeterminate

Приклади

Поле для галочки та радіокнопка

Цей приклад застосовує особливі стилі до підписів, пов'язаних із невизначеними полями форми.

HTML

<fieldset>
  <legend>Поле для галочки</legend>
  <div>
    <input type="checkbox" id="checkbox" />
    <label for="checkbox"
      >Цей підпис поля для галочки спочатку має світло-зелений колір.</label
    >
  </div>
</fieldset>

<fieldset>
  <legend>Радіокнопки</legend>
  <div>
    <input type="radio" id="radio1" name="radioButton" value="val1" />
    <label for="radio1"
      >Підпис першої радіокнопки спершу має світло-зелений колір.</label
    >
  </div>
  <div>
    <input type="radio" id="radio2" name="radioButton" value="val2" />
    <label for="radio1"
      >Підпис другої радіокнопки також спершу має світло-зелений колір.</label
    >
  </div>
</fieldset>

CSS

input:indeterminate + label {
  background: lime;
}

fieldset {
  padding: 1em 0.75em;
}

fieldset:first-of-type {
  margin-bottom: 1.5rem;
}

fieldset:not(:first-of-type) > div:not(:last-child) {
  margin-bottom: 0.5rem;
}

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;
}

Результат

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

Сумісність із браузерами

Дивіться також

• Вебформи – Робота з користувацькими даними
• Оформлення вебформ
• Властивість indeterminate елемента <input type="checkbox">
• Елемент <input> і інтерфейс HTMLInputElement, який його реалізує.
• Селектор CSS :checked дає змогу оформлювати поля для галочок на основі того, чи є вони вибраними, чи ні