:indeterminate

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

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

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

  • Елементи <input type="checkbox">, чиїй властивості indeterminate присвоєно true за допомогою JavaScript
  • Елементи <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;
}

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

Результат

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

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

desktop mobile
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox for Android Opera Android Safari on iOS Samsung Internet
:indeterminate
Chrome Full support 1
Edge Full support 12
Firefox Full support 2
Internet Explorer Full support 10
Opera Full support 9
Safari Full support 3
WebView Android Full support 37
Chrome Android Full support 18
Firefox for Android Full support 4
Opera Android Full support 10.1
Safari on iOS Full support 1
Samsung Internet Full support 1.0
Applies to <input type="checkbox"> elements
Chrome Full support 1
Edge Full support 12
Firefox Full support 3.6
Internet Explorer Full support 10
Opera Full support 10.6
Safari Full support 3
WebView Android Full support 37
Chrome Android Full support 18
Firefox for Android Full support 4
Opera Android Full support 11
Safari on iOS Full support 1
Samsung Internet Full support 1.0
Applies to <progress> elements
Chrome Full support 6
Edge Full support 12
Firefox Full support 6
Internet Explorer Full support 10
Opera Full support 15
Safari Full support 5.1
WebView Android Full support 37
Chrome Android Full support 18
Firefox for Android Full support 6
Opera Android Full support 14
Safari on iOS Full support 5
Samsung Internet Full support 1.0
Applies to <input type="radio"> elements
Chrome Full support 39
Edge Full support 79
Firefox Full support 51
Internet Explorer No support No
Opera Full support 26
Safari No support No
footnote
WebView Android Full support 39
Chrome Android Full support 39
Firefox for Android Full support 51
Opera Android Full support 26
Safari on iOS No support No
footnote
Samsung Internet Full support 4.0

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