CSS :: Псевдокласс :in-range

Псевдокласс :in-range (от англ. in range – в диапазоне) позволяет выбрать все элементы требуемого типа, у которых введённое пользователем значение находится в заранее заданном диапазоне (устанавливается при помощи атрибутов min и max), например, input:in-range {блок объявлений}.

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

Синтаксис

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

Ссылки

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

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

Примеры

HTML Результат

htmlCodes

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

	<style>
		
		/* При попадании в диапазон выделим поле зеленой рамкой */
		input:in-range{
		outline: 3px;
		outline-color: green;
		outline-style: solid;	
		}
		
		/* При выходе за диапазон выделим поле красной рамкой */
		input:out-of-range{
		outline: 3px;
		outline-color: red;
		outline-style: solid;	
		}
			
	</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" min="1" max="10" id="number_field" value="1"><br><br> 
		
		<button type="reset">Сброс</button> &nbsp; 
						
		<button type="submit" disabled>Отправить</button>
		
	</form>
	
</body>
</html>

Пример №1