The :user-invalidje pseudotřída CSS, která je pod návrhem v pracovním konceptu úrovně CSS Selectors úrovně 4, který vybírá prvek formuláře na základě toho, zda hodnota zadaná uživatelem je platná, když je porovnána s tím, co je zadáno jako přijatá hodnota v značka HTML po interakci koncového uživatele s formulářem nad rámec tohoto vstupu. Ve skutečnosti se :user-invalidtomu říká „Pseudotřída interakce uživatele“, protože je jedinečná při identifikaci akce uživatele při výběru prvku.
Vezměte následující kód HTML pro základní formulář s číselným polem:
Číselný rozsah nastavený značením HTML pro vstup je mezi 1a 10ale výchozí hodnota byla nastavena na 11. To znamená, že hodnota je neplatná, jakmile se načte formulář.
Nicméně, :user-invalidbude pseudo-class se projeví až poté, co uživatel skutečně ve styku s formou mimo zadáním do pole. Tato interakce je rozdíl mezi :user-invalida :invalid. Stejný princip platí pro zadané hodnoty formuláře, které jsou nastaveny pomocí :in-range, :out-of-rangea :required.
Jakmile je hodnota, kterou uživatel zadal, určena jako neplatná položka, můžeme vybrat prvek:
input:user-invalid ( color: red; )Následující obrázek ilustruje různé stavy mezi :valida :user-invalidna základě výše uvedeného příkladu HTML.
Matoucí je to, jak úzce souvisí :invalida :user-invalidjsou. Pokud se použijí společně, může být těžké tyto dva odlišit:
input:invalid ( color: red; ) input:user-invalid ( color: red; )
:invalid(uprostřed) a neplatnou hodnotou zadanou uživatelem (vpravo) může být obtížné rozlišit
Použití jednoho přes druhého nebo odlišný styl mezi nimi se může v případě použití v reálném životě ukázat jako lepší uživatelská zkušenost.
Podpora prohlížeče
:user-invalid není aktuálně podporováno, ale je navrženo v pracovním konceptu úrovně 4 CSS Selectors.
Firefox používá předponu nestandardní vlastnost, -moz-ui-invalidkterá přijímá podobné standardy.
Příbuzný
:invalid:valid
Více informací
- Specifikace úrovně 4 selektorů CSS
- Specifikace MDN pro
:-moz-ui-invalid