:user-invalid

Псевдоклас CSS :user-invalid (недійсне від користувача) представляють всі елементи форм, до яких була застосована валідація та чиє значення не є дійсним на основі їхніх обмежень валідації, після того, як користувач мав з ними взаємодію.

Псевдоклас :user-invalid повинен збігатися з елементом, який має збіг з :invalid, :out-of-range, або водночас порожнім і :required, між спробою подати форму і повторною взаємодією з формовим елементом.

Синтаксис

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

Приклади

Задання на :user-invalid кольору та символу

У наступному прикладі червона межа та ❌ виводяться лише тоді, коли користувач провзаємодіяв з полем. Спробуйте надрукувати щось, відмінне від адреси електронної пошти, щоб побачити це в дії.

<form>
  <label for="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