:requiredСелектор псевдо - класса в CSS позволяет авторам выбирать и стиль любого согласованного элемент с requiredатрибутом. Формы могут легко указать, какие поля должны содержать действительные данные, прежде чем форма может быть отправлена, но позволяет пользователю избежать ожидания, вызванного тем, что сервер будет единственным валидатором ввода пользователя.
Допустим, у нас есть вход с атрибутом, type="name"и мы делаем его обязательным с помощью requiredлогического атрибута 1 :
Теперь мы можем стилизовать этот ввод с помощью :requiredселектора псевдокласса:
/* style all elements with a required attribute */ :required ( background: red; )Мы также можем стилизовать обязательные поля формы, используя простые селекторы, а также объединяя в цепочку дополнительные селекторы псевдоклассов:
/* style all input elements with a required attribute */ input:required ( box-shadow: 4px 4px 20px rgba(200, 0, 0, 0.85); ) /** * style input elements that have a required * attribute and a focus state */ input:required:focus ( border: 1px solid red; outline: none; ) /** * style input elements that have a required * attribute and a hover state */ input:required:hover ( opacity: 1; )Демо
См. Pen: required Styling Криса Койера (@chriscoyier) на CodePen.
Точки интереса
requiredАтрибут трактуются как логическое значение означает , что он не требует значений. Простое requiredвключение элемента позволяет браузеру знать, что этот атрибут существует, и соответствующий ввод фактически является обязательным полем. Хотя, согласно спецификации W3C, обязательный атрибут также работает с пустым значением или значением с именем атрибута.
Обязательный атрибут также запрашивает у браузера использование собственных выноски, таких как всплывающее сообщение, изображенное из демонстрации.
Для тех входных данных, которые не стилизованы с использованием :required, авторы могут также настроить необязательные элементы с помощью :optionalселектора псевдокласса вместе с :invalidи, :validкоторые запускаются при выполнении требований к данным поля формы.
Валидация формы также может дополняться рядом requiredс patternатрибутом данных помощи фильтра в зависимости от входного в typeатрибуте. Шаблоны можно записать как регулярное выражение или строку. В приведенном ниже примере мы используем регулярное выражение для соответствия синтаксису адреса электронной почты.
:requiredАтрибут работает на радио - кнопок. Если вы поставите required на одну радиокнопку (или на все), эта конкретная группа радиокнопок будет обязательной. Для флажков делает каждый отдельный флажок обязательным (для отметки).
Поддержка браузера
Эти данные о поддержке браузером взяты из Caniuse, где есть более подробная информация. Число означает, что браузер поддерживает эту функцию в этой версии и выше.
Рабочий стол
| Хром | Fire Fox | IE | Край | Сафари |
|---|---|---|---|---|
| 10 | 4 | 10 | 12 | 10.1 |
Мобильный / планшет
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 4.4.3-4.4.4 | 10,3 |
1 Логические атрибуты . Ряд атрибутов в HTML5 являются логическими атрибутами. Наличие логического атрибута в элементе представляет истинное значение, а отсутствие атрибута представляет ложное значение. Если атрибут присутствует, его значение должно быть либо пустой строкой, либо значением, которое без учета регистра соответствует каноническому имени атрибута, без начальных или конечных пробелов.