:optional

Псевдоклас CSS :optional (необов'язковий) представляє всі елементи <input>, <select> і <textarea>, що не мають атрибута required.

Спробуйте його в дії

Цей псевдоклас корисний для виділення полів, які необов'язкові для подавання форми.

Примітка: Псевдоклас :required вибирає обов'язкові поля форм.

Синтаксис

:optional {
  /* ... */
}

Приклади

Необов'язкове поле має фіолетову межу

HTML

<form>
  <div class="field">
    <label for="url_input">Уведіть URL:</label>
    <input type="url" id="url_input" />
  </div>

  <div class="field">
    <label for="email_input">Уведіть адресу електронної пошти:</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. Завдяки цьому можна мати впевненість, що люди, які користуються допоміжними технологіями, як то читачем з екрана, зможуть зрозуміти, які поля потребують дійсного вмісту для успішного подання форми.

Обов'язкові поля також повинні бути виділені візуально, за допомогою способу, який не покладається для передачі змісту лише на колір. Зазвичай використовують описовий текст чи піктограму.

• MDN Розуміння WCAG, пояснення Настанови 3.3
• Розуміння Критерію успіху 3.3.2 | W3C розуміння WCAG 2.0

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

Сумісність із браузерами

Дивіться також

• Інші псевдокласи, що стосуються валідації: :required, :invalid, :valid
• Валідація даних форми