:optional css

Кратко

С помощью псевдокласса :optional можно выбрать элементы, заполнять которые необязательно. Это могут быть <input>, <select> и <textarea> без атрибута required.

Пример

HTML:
<form>
  <label>Имя вашего котика: <input></label>
</form>

CSS:
input:optional {
  border-color: #d77d31;
}

Как пишется

Выбираем элемент без атрибута required и в селекторе используем :optional:

textarea:optional {
  color: black;
}

Как понять

В формах важно визуально отмечать, какие поля следует обязательно заполнить, а какие можно пропустить. Так пользователям не придётся заполнять лишнее.

Псевдокласс :optional помогает улучшить опыт взаимодействия с формой. Визуально отмечаем, что нам не так уж нужно знать, и экономим драгоценное время и нервы пользователя.

Источник: https://doka.guide/css/optional/