:optional

Показываем, какие поля заполнять необязательно.

Время чтения: меньше 5 мин

Это незавершённая статья. Вы можете помочь её закончить! Почитайте о том, как контрибьютить в Доку.

Кратко

Секция статьи "Кратко"

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

Пример

Секция статьи "Пример"
        
          
          <form>  <label>Имя вашего котика: <input></label></form>
          <form>
  <label>Имя вашего котика: <input></label>
</form>

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

        
        
          
        
      

Как пишется

Секция статьи "Как пишется"

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

        
          
          textarea:optional {  color: black;}
          textarea:optional {
  color: black;
}

        
        
          
        
      

Как понять

Секция статьи "Как понять"

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

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