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

Псевдокласс :indeterminate (от англ. indeterminate – неопределенный) позволяет выбрать группы элементов формы требуемого типа, находящиеся в неопределенном состоянии, например, input:indeterminate {блок объявлений}. Данный псевдокласс имеет смысл использовать для следующих элементов: <input type="checkbox"> (при чем свойство indeterminate должно быть установлено в true через JavaScript), <input type="radio"> и <progress>.

Селектор псевдоклассов напоминает селектор классов, но в отличие от классов, псевдоклассы в разметке html-документа не указываются и отделяются от указанного в селекторе элемента двоеточием «:». При этом выбираются элементы необходимого типа, которые соответствуют требованиям указанного в селекторе псевдокласса.

Синтаксис

<селектор>:indeterminate {блок объявлений}

Ссылки

Официальный сайт W3C: https://drafts.csswg.org/selectors-4/#indeterminate

Статья на Mozilla Firefox: https://developer.mozilla.org/ru/docs/Web/CSS/:indeterminate

Примеры

HTML Результат

htmlCodes

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">  
	<title>Пример №1</title>

	<style>
				
		/* Выделим метки неопределенных переключателей */
		input:indeterminate + label{
		color: green;
		}
		
	</style>
	
</head>
<body>

	<form action="http://localhost/test/php/script_1.php" method="POST">
		
		<label for="number_field">Введите число от 1 до 10: </label> &nbsp; 
		<input type="number" id="number_field"><br><br> 
		
		<!-- Для радиокнопок JavaScript не нужен -->
		Укажите его четность: &nbsp; 
		<input type="radio" name="even_odd" id="even" value="even">
		<label for="even"> четное</label> &nbsp; &nbsp;
		<input type="radio" name="even_odd" id="odd" value="odd">
		<label for="odd"> нечетное</label><br><br> 

		<!-- Для чекбокосв нужен JavaScript -->		
		Укажите его кратность: &nbsp; 
		<input type="checkbox" name="two" id="two" value="1">
		<label for="two"> кратно 2</label> &nbsp; &nbsp;
		<input type="checkbox" name="three" id="three" value="0">
		<label for="three"> кратно 3</label><br><br>
		
		<button type="reset">Сброс</button> &nbsp; 
		<button type="submit" disabled>Отправить</button>
		
	</form>
	
	<script>
		
		//Переведем все чекбоксы в неопределенное состояние		
		for(var i=0; i<2;i++){
			document.querySelectorAll('[type="checkbox"]')[i].indeterminate = true;
		}

	</script>	
  
</body>
</html>

Пример №1