Jedná :user-invalidsa o pseudotriedu CSS, ktorá je predmetom návrhu v pracovnom koncepte úrovne výberu CSS 4, ktorý vyberá prvok formulára na základe toho, či je hodnota zadaná používateľom platná, ak je porovnaná s hodnotou zadanou ako akceptovaná hodnota v značka HTML po interakcii koncového používateľa s formulárom nad rámec tohto vstupu. V skutočnosti :user-invalidsa nazýva „Pseudotrieda interakcie používateľa“, pretože je jedinečná pri identifikácii akcie používateľa pri výbere prvku.
Pre základný formulár s číselným poľom použite nasledujúci kód HTML:
Číselný rozsah nastavený značením HTML pre vstup je medzi 1a, 10ale predvolená hodnota bola nastavená na 11. To znamená, že hodnota je neplatná hneď po načítaní formulára.
Avšak, :user-invalidbude pseudo-class sa prejaví až po tom, čo používateľ skutočne v styku s formou mimo zadaním do poľa. Táto interakcia je rozdielom medzi :user-invalida :invalid. Rovnaký princíp platí pre zadané hodnoty formulára, ktoré sú nastavené pomocou :in-range, :out-of-rangea :required.
Keď sa hodnota, ktorú zadal používateľ, určí ako neplatná, môžeme vybrať prvok:
input:user-invalid ( color: red; )Na nasledujúcom obrázku sú znázornené rôzne stavy medzi :valid, a :user-invalidna základe príkladu HTML vyššie.
Mätúce je tu to, ako úzko súvisia :invalida :user-invalidsú. Ak sa používajú spolu, môže byť ťažké ich rozlíšiť:
input:invalid ( color: red; ) input:user-invalid ( color: red; )
:invalid(stredom) a neplatnou hodnotou zadanou používateľom (vpravo) môže byť ťažké rozlíšiť
Použitie jedného nad druhým alebo odlišný štýl medzi nimi sa môže v prípade použitia v reálnom živote ukázať ako lepšia používateľská skúsenosť.
Podpora prehľadávača
:user-invalid momentálne nie je podporovaný, ale je navrhnutý v pracovnom koncepte úrovne 4 výberu CSS.
Firefox používa vopred predpísané neštandardné vlastníctvo, -moz-ui-invalidktoré prijíma podobné štandardy.
Súvisiace
:invalid:valid
Viac informácií
- Špecifikácia úrovne 4 selektorov CSS
- Špecifikácia MDN pre
:-moz-ui-invalid