Псевдокласс CSS `:optional`

:optional CSS псевдокласс обозначает любой элемент <input>, <select> или <textarea>, у которого не установлен атрибут required.

Попробуйте

label {
  display: block;
  margin-top: 1em;
}

.req {
  color: red;
}

*:optional {
  background-color: palegreen;
}

<form>
  <label for="name">Name: <span class="req">*</span></label>
  <input id="name" name="name" type="text" required />

  <label for="birth">Date of Birth:</label>
  <input id="birth" name="birth" type="date" />

  <label for="origin"
    >How did you find out about us? <span class="req">*</span></label
  >
  <select id="origin" name="origin" required>
    <option>Google</option>
    <option>Facebook</option>
    <option>Advertisement</option>
  </select>
  <p><span class="req">*</span> - Required field</p>
</form>

Этот псевдокласс полезен для оформления полей, которые не являются обязательными для отправки формы.

Синтаксис

:optional {
  /* ... */
}

Доступность

Если форма form содержит необязательные элементы <input>, обязательные поля ввода следует обозначать атрибутом required. Благодаря этому люди, использующие вспомогательные технологии, например программы чтения с экрана, смогут понять, в какие поля нужно ввести допустимые данные для успешной отправки формы.

Обязательные поля также следует визуально обозначать способом, который не полагается исключительно на цвет для передачи смысла. Обычно для этого используют поясняющий текст и/или значок.

• Понимание WCAG на MDN: пояснения к рекомендации 3.3

• [Понимание критерия успеха 3.3.2

  Понимание WCAG 2.0 от W3C](https://www.w3.org/TR/UNDERSTANDING-WCAG20/minimize-error-cues.html)

Примеры

У необязательного поля фиолетовая рамка

HTML

<form>
  <div class="field">
    <label for="url_input">Enter a URL:</label>
    <input type="url" id="url_input" />
  </div>

  <div class="field">
    <label for="email_input">Enter an email address:</label>
    <input type="email" id="email_input" required />
  </div>
</form>

CSS

label {
  display: block;
  margin: 1px;
  padding: 1px;
}

.field {
  margin: 1px;
  padding: 1px;
}

input:optional {
  border-color: rebeccapurple;
  border-width: 3px;
}

Результат

Спецификации

Совместимость с браузерами

См. также

• Другие псевдоклассы, связанные с проверкой корректности: :required, :invalid, :valid
• Проверка корректности данных формы