:optional

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

Попробуйте

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

Примечание: Псевдокласс :required выбирает обязательные поля формы.

Синтаксис

:optional {
  /* ... */
}

Доступность

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

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

Примеры

Необязательное поле имеет фиолетовую границу

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;
}

Результат

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

Спецификация
Стандарт HTML # selector-optional
Селекторы Уровень 4 # opt-pseudos

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

	Рабочие столы					Мобильные
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari on IOS	Samsung Internet	WebView Android
`:optional`	10	12	4	10	5	18	4	10.1	5	1.0	37

См. также

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

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/:optional