CSS-псевдокласс `:user-invalid`

:user-invalid CSS-псевдокласс представляет любой проверенный элемент формы, значение которого не соответствует ограничениям проверки после взаимодействия с ним пользователя.

Псевдокласс :user-invalid должен соответствовать элементу :invalid, :out-of-range или пустому, но :required элементу с момента, когда пользователь попытался отправить форму, и до тех пор, пока пользователь снова не взаимодействовал с этим элементом формы.

Синтаксис

:user-invalid {
  /* ... */
}

Примеры

Задание цвета и символа для :user-invalid

В следующем примере красная рамка и ❌ отображаются только после взаимодействия пользователя с полем. Попробуйте ввести что-нибудь, отличное от адреса электронной почты, чтобы увидеть, как это работает.

<form>
  <label for="email">Email *: </label>
  <input id="email" name="email" type="email" required />
  <span></span>
</form>

input:user-invalid {
  border: 2px solid red;
}

input:user-invalid + span::before {
  content: "✖";
  color: red;
}

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

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

См. также

• :valid
• :invalid
• :required
• :optional
• :user-valid