:optional

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

Он применяется к:

• <input>
• <select>
• <textarea>

Если у элемента нет атрибута required, он считается необязательным и попадает под :optional.

        
          
          input:optional {  border-color: #2e9aff;}
          input:optional {
  border-color: #2e9aff;
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

        
          
          <form>  <label>    Имя вашего котика:    <input type="text" name="cat-name">  </label>  <label>    Email:    <input type="email" name="email" required>  </label></form>
          <form>
  <label>
    Имя вашего котика:
    <input type="text" name="cat-name">
  </label>

  <label>
    Email:
    <input type="email" name="email" required>
  </label>
</form>

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Псевдокласс применяется к полям формы, у которых не указан атрибут required:

        
          
          input:optional {  background-color: #fff8f1;}
          input:optional {
  background-color: #fff8f1;
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Браузер автоматически определяет, какие поля формы обязательны для заполнения.

• Если у элемента есть атрибут required, он считается обязательным
• Если атрибута нет — поле считается необязательным и попадает под :optional

Это позволяет:

• визуально отделять важные поля от второстепенных
• улучшать UX форм
• уменьшать когнитивную нагрузку пользователя

💡 Псевдокласс работает только с элементами формы, а не с любыми HTML-элементами.
💡 :optional удобно использовать для стилизации второстепенных полей — например, дополнительных данных профиля.
💡 Часто комбинируется с :required, чтобы явно разделить визуально важные и необязательные поля:

        
          
          input:required {  border-color: #2e9aff;}input:optional {  border-color: #d77d31;}
          input:required {
  border-color: #2e9aff;
}

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

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать