`:required` псевдокласс CSS

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

Попробуйте

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

.req {
  color: red;
}

*:required {
  background-color: gold;
}

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

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

Синтаксис

:required {
  /* ... */
}

Доступность

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

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

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

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

  W3C: понимание WCAG 2.0](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:required {
  border-color: maroon;
  border-width: 3px;
}

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

Результат

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

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

См. также

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