CSS псевдокласс :optional

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

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

Версия

CSS3

Синтаксис

:optional {
css declarations;
}

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      .example {
      margin: 40px auto;
      max-width: 400px;
      }
      label,
      button {
      display: block;
      width: 100%;
      margin-bottom: 1.5em;
      }
      input,
      select,
      button {
      padding: .4em 1em;
      }
      input,
      select {
      border: 1px solid #666666;
      }
      input:optional,
      select:optional {
      background-color: #eeeeee;
      color: #666666;
      opacity: 0.5;
      transition: .3s;
      }
      input:optional:hover,
      select:optional:hover {
      opacity: 1;
      }
      input:required,
      textarea:required {
      border-bottom: 3px solid #1c87c9;
      }
    </style>
  </head>
  <body>
    <h2>Пример селектора :optional</h2>
    <div class="example">
      <form action="#">
        <label>
        <input type="name" required>Имя*
        </label>
        <label>
        <input type="email" required>Email *
        </label>
        <label>
        <input type="phone">Телефон (необязателен)
        </label>
        <label>
        <input type="url">Адрес (необязателен)
        </label>
      </form>
    </div>
  </body>
</html>

В данном примере использованы псевдоклассы :optional и :required.

Поддержка браузера

chrome edge firefox safari opera
15.0+ 12.0+ 4.0+ 5.0+ 15.0+

Практикуйте свои знания

Что такое псевдокласс :optional в CSS?
Считаете ли это полезным?