:required

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

Попробуйте

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

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

Синтаксис

:required {
  /* ... */
}

Доступность

Обязательные <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:required {
  border-color: #800000;
  border-width: 3px;
}

input:required:invalid {
  border-color: #c00000;
}

Результат

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

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

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

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

См. также

Другие псевдоклассы, связанные с валидацией: :optional, :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/:required