: nevažeći korisnik - CSS-trikovi

Anonim

To :user-invalidje CSS pseudo-klasa koja je predložena u radnom nacrtu CSS Selectors Level 4 koji odabire element obrasca na temelju toga vrijedi li vrijednost koju je korisnik unio ako je provjerena u odnosu na ono što je navedeno kao prihvaćena vrijednost u HTML oznaka nakon što je krajnji korisnik stupio u interakciju s obrascem izvan tog unosa. Zapravo :user-invalidse naziva "pseudo-klasa interakcije korisnika" jer je jedinstvena u identificiranju korisničke radnje pri odabiru elementa.

Uzmite sljedeće HTML oznake za osnovni obrazac s numeričkim poljem:

Količina:

Brojčani raspon postavljen HTML oznakom za ulaz je između 1i 10ali zadana vrijednost postavljena je na 11. To znači da je vrijednost nevaljana čim se obrazac učita.

Međutim, :user-invalidpseudo-klasa će stupiti na snagu tek nakon što korisnik stvarno stupi u interakciju s obrascem nakon što ga unese u polje. Ta je interakcija razlika između :user-invalidi :invalid. Isti princip vrijedi i za ušli oblik vrijednosti koje su postavljene od strane :in-range, :out-of-rangei :required.

Nakon što se utvrdi da je vrijednost koju je korisnik unio nevažeća, možemo odabrati element:

input:user-invalid ( color: red; )

Sljedeća slika ilustrira različita stanja između :validi :user-invalidna temelju gornjeg HTML primjera.

Razlika između važeće vrijednosti (lijevo) i nevaljane vrijednosti koju je korisnik unio nakon interakcije s obrascem.

Zbunjujuća stvar ovdje je koliko su usko povezani :invalidi kako su povezani :user-invalid. Ako se koriste zajedno, možda će biti teško razlikovati to dvoje:

input:invalid ( color: red; ) input:user-invalid ( color: red; )
:invalidTeško je razlikovati razliku između (središte) i nevažeće vrijednosti koju je unio korisnik (zdesna)

Korištenje jednog preko drugog ili različito oblikovanje između njih moglo bi se pokazati boljim korisničkim iskustvom u stvarnom slučaju upotrebe.

Podrška preglednika

:user-invalid trenutno nije podržan, ali je predložen u radnom nacrtu CSS Selectors Level 4.

Firefox koristi prefiksno nestandardno svojstvo -moz-ui-invalidkoje prihvaća slične standarde.

Povezano

  • :invalid
  • :valid

Više informacija

  • Specifikacija CSS izbornika razine 4
  • MDN specifikacija za :-moz-ui-invalid