Псевдоклассы :required и :optional

Псевдоклассы :required и :optional позволяют добавить стиль к полям формы для обязательного и не обязательного заполнения. Тем самым подсказывая пользователю какие поля необходимо заполнить, и какие не обязательно.

Псевдокласс :required применяет стиль к полям формы обязательные для заполнения с атрибутом required. Если не заполнить поле формы обязательное для заполнения браузер обведёт поле красной рамкой и покажет уведомление с просьбой заполнить обязательное поле.

Уведомление псевдокласс :required с просьбой заполнить поле формы обязательное для заполнения
Уведомление с просьбой заполнить поле формы

Псевдокласс :optional применяет стиль к полям формы не обязательные для заполнения.

Применить

В примере поля формы имеют дополнительный класс для добавления определённого стиля. Поля обязательные для заполнения помечены звездочкой красного цвета. Поля не обязательные для заполнения без метки.

HTML

<div>
<label for="name">Имя:</label>
<input type="text" id="name" required>
<span class="val"></span>
</div>

<div>
<label for="email">E-mail:</label>
<input type="email" id="email" required>
<span class="val"></span>
</div>

<div>
<label for="address">URL:</label>
<input type="text" id="address">
<span class="val"></span>
</div>

CSS4

Псевдоклассы :required и :optiona селекторы четвёртого уровня CSS4.

input:required ~ .val:after {
  content: '*';
  color: red;
}
 
input:optional ~ .val:after {
  content: '(optional)';
}

CSS3

input[required] ~ .val:after {
  content: '*';
  color: red;
}

Поддержка

Еще псевдоклассы CSS4