CSS псевдокласс :indeterminate выбирает элемент пользовательского интерфейса, который находится в неопределенном состоянии.
Псевдокласс:indeterminate задает стиль для флажков и переключателей, элементов progress.
Неопределенное состояние флажков может быть задано только через JavaScript. Переключатели и элементы progress могут быть установлены в HTML.
Версия
CSS3
Синтаксис
:indeterminate {
css declarations;
}Пример
<!DOCTYPE html>
<html>
<head>
<title>Заголовок документа</title>
<style>
input:indeterminate {
box-shadow: 0 0 2px 2px #666;
}
</style>
</head>
<body>
<h2>Пример селектора indeterminate</h2>
<form>
<input type="checkbox" id="box"> Checkbox
<script>
var checkbox = document.getElementById("box");
checkbox.indeterminate = true;
</script>
</form>
</body>
</html>В следующем примере вся группа находится в неопределенном состоянии, когда нет выбранного варианта:
Пример
<!DOCTYPE html>
<html>
<head>
<title>Заголовок документа</title>
<style>
label {
margin-right: .5em;
position: relative;
top: 1px;
}
input[type="radio"]:indeterminate + label {
color: #8ebf42;
}
</style>
</head>
<body>
<h2>Пример селектора :indeterminate</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>Поддержка браузера
|
|
|
|
|
|---|---|---|---|---|
| 39.0+ | 12.0+ | 51.0+ | 10.1+ | 26.0+ |
Практикуйте свои знания
Какие типы элементов могут иметь псевдокласс :indeterminate в CSS?
Правильный!
Неправильно!