:indeterminate
Baseline
Widely available
This feature is well established and works across many devices and browser versions. Itâs been available across browsers since иÑÐ»Ñ 2015 г..
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 |