CSS :: Псевдокласс :required
Псевдокласс :required
(от англ. required – обязательный)
позволяет выбрать все обязательные для заполнения поля формы <input>
(у них присутствует атрибут required), например, input:required {блок объявлений}
.
Селектор псевдоклассов напоминает селектор классов, но в отличие от классов, псевдоклассы в разметке html-документа не указываются и отделяются от указанного в селекторе элемента двоеточием «:». При этом выбираются элементы необходимого типа, которые соответствуют требованиям указанного в селекторе псевдокласса.
Синтаксис
<селектор>:required {блок объявлений}
Ссылки
Официальный сайт W3C: https://drafts.csswg.org/selectors-4/#opt-pseudos
Статья на Mozilla Firefox: https://developer.mozilla.org/ru/docs/Web/CSS/:required
Примеры
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Пример №1</title> <style> /* Обязательное поле выделим красной рамкой */ input:required{ outline: 3px; outline-color: red; outline-style: solid; } /* Необязательное поле выделим оранжевой рамкой */ input:optional{ outline: 3px; outline-color: orange; outline-style: solid; } button:default{ color: green; border: 1px solid blue; } </style> </head> <body> <form action="http://localhost/test/php/script_1.php" method="POST"> <label for="first_name">Имя: </label> <input type="text" name="first_name" id="first_name" required><br><br> <label for="second_name">Фамилия: </label> <input type="text" name="second_name" id="second_name"><br><br> <button type="reset">Сброс</button> <!-- Цвет надписи будет зеленым, а граница синей, т.к. --> <!-- из двух кнопок данная используется по умолчанию --> <button type="submit" disabled>Отправить</button> </form> </body> </html>
Пример №1