:user-invalid

Базовая версия 2023

Новое

С ноября 2023 года эта функция работает на последних версиях устройств и браузеров. Возможно, эта функция не будет работать на старых устройствах или браузерах.

Псевдокласс :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;
}

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

Спецификация
Уровни селекторов 4 # user-invalid-pseudo

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

	Рабочий стол					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`:user-invalid`	119	119	884	105	16.5	119	884	79	16.5	25.0	119

См. также

© 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/:user-invalid