To :user-invalidje psevdorazred CSS, ki je predlagan v delovnem osnutku stopnje 4 izbirnikov CSS, ki izbere element obrazca glede na to, ali je vrednost, kot jo vnese uporabnik, veljavna, če je preverjena glede na tisto, kar je določeno kot sprejeta vrednost v oznaka HTML po tem, ko je končni uporabnik sodeloval z obrazcem zunaj tega vnosa. Pravzaprav se :user-invalidje imenoval »psevdo-razred interakcije uporabnika«, ker je edinstven pri prepoznavanju uporabnikovega dejanja pri izbiri elementa.
Vzemite naslednje oznake HTML za osnovni obrazec s številskim poljem:
Številski obseg, ki ga za vnos nastavi oznaka HTML, je med 1in 10privzeta vrednost pa je nastavljena na 11. To pomeni, da je vrednost neveljavna takoj, ko se obrazec naloži.
Vendar :user-invalidpsevdorazred začne veljati šele po tem, ko uporabnik dejansko vstopi v obrazec, razen če ga vnese v polje. Ta interakcija je razlika med :user-invalidin :invalid. Isto načelo velja za vpisane vrednosti, oblike, ki jih določajo :in-range, :out-of-rangein :required.
Ko je vrednost, ki jo je uporabnik vnesel, ugotovljena kot neveljaven, lahko izberemo element:
input:user-invalid ( color: red; )Naslednja slika prikazuje različna stanja med :validin :user-invalidna podlagi zgornjega primera HTML.
Zmedeno pri tem je, kako tesno so povezani :invalidin kako :user-invalidso. Če jih uporabimo skupaj, je težko ločiti oba:
input:invalid ( color: red; ) input:user-invalid ( color: red; )
:invalid(sredino) in neveljavno vrednostjo, ki jo vnese uporabnik (desno), je težko ločiti
Uporaba enega nad drugim ali različen slog med njima bi se lahko izkazala za boljšo uporabniško izkušnjo v resničnem primeru uporabe.
Podpora za brskalnik
:user-invalid trenutno ni podprt, vendar je predlagan v delovnem osnutku CSS Selectors Level 4.
Firefox uporablja vnaprej določeno nestandardno lastnost, -moz-ui-invalidki sprejme podobne standarde.
Sorodno
:invalid:valid
Več informacij
- Specifikacija izbirnikov CSS 4. stopnje
- Specifikacija MDN za
:-moz-ui-invalid