CSS :: Псевдокласс :invalid
Псевдокласс :invalid
(от англ. invalid – неверный)
позволяет выбрать все поля формы, у которых введённое пользователем значение не соответствует указанному типу, например,
input:invalid {блок объявлений}
.
Селектор псевдоклассов напоминает селектор классов, но в отличие от классов, псевдоклассы в разметке html-документа не указываются и отделяются от указанного в селекторе элемента двоеточием «:». При этом выбираются элементы необходимого типа, которые соответствуют требованиям указанного в селекторе псевдокласса.
Синтаксис
<селектор>:invalid {блок объявлений}
Ссылки
Официальный сайт W3C: https://drafts.csswg.org/selectors-4/#validity-pseudos
Статья на Mozilla Firefox: https://developer.mozilla.org/ru/docs/Web/CSS/:invalid
Примеры
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Пример №1</title> <style> /* При вводе числового значения выделим поле зеленой рамкой */ input[type="number"]:valid{ outline: 2px; outline-color: green; outline-style: solid; } /* При вводе запрещенного типа значения выделим поле красной рамкой */ input[type="number"]:invalid{ outline: 2px; 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