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
Примеры
<!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> <input type="number" min="1" max="10" id="number_field" value="1"><br><br> <button type="reset">Сброс</button> <button type="submit" disabled>Отправить</button> </form> </body> </html>
Пример №1