Це :user-invalidпсевдо-клас CSS, який пропонується в робочому проекті CSS селекторів рівня 4, який вибирає елемент форми на основі того, чи значення, як введене користувачем, є дійсним, якщо перевіряється з тим, що вказано як прийняте значення в розмітка HTML після того, як кінцевий користувач взаємодіє з формою поза цим входом. Насправді :user-invalidйого називали “Псевдо-клас взаємодії з користувачем”, оскільки він унікальний у визначенні дії користувача при виборі елемента.
Візьміть таку розмітку HTML для базової форми з числовим полем:
Числовий діапазон, встановлений розміткою HTML для введення, знаходиться між 1і, 10але значенням за замовчуванням встановлено значення 11. Це означає, що значення недійсне, як тільки форма завантажується.
Однак :user-invalidпсевдо-клас набуде чинності лише після того, як користувач фактично взаємодіє з формою після введення її в поле. Ця взаємодія є різницею між :user-invalidі :invalid. Той самий принцип застосовується до введених значень форми, які встановлюються :in-range, :out-of-rangeта :required.
Після того, як значення, яке ввів користувач, визнано недійсним, ми можемо вибрати елемент:
input:user-invalid ( color: red; )Наступне зображення ілюструє різні стани між :validі :user-invalidна основі прикладу HTML вище.
Плутаючи річ з ось як тісно пов'язані :invalidі :user-invalidє. Якщо використовувати їх разом, може бути важко розрізнити два:
input:invalid ( color: red; ) input:user-invalid ( color: red; )
:invalid(в центрі) та недійсним значенням, введеним користувачем (праворуч), важко відрізнити
Використання одного над іншим або наявність чіткого стилю між ними може виявитись кращим досвідом для користувачів у реальному випадку використання.
Підтримка браузера
:user-invalid наразі не підтримується, але пропонується у робочому проекті CSS Selectors Level 4.
Firefox використовує префікс нестандартної властивості, -moz-ui-invalidяка приймає подібні стандарти.
Пов’язані
:invalid:valid
Більше інформації
- Специфікація CSS Selectors Level 4
- Специфікація MDN для
:-moz-ui-invalid