:optional

С помощью псевдокласса :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 помогает улучшить опыт взаимодействия с формой. Визуально отмечаем, что нам не так уж нужно знать, и экономим драгоценное время и нервы пользователя.