Tai :user-invalidCSS pseudoklasė, kuriai pateiktas pasiūlymas CSS selektorių 4 lygio darbiniame projekte, kuri pasirenka formos elementą pagal tai, ar vartotojo įvesta vertė yra teisinga, kai tikrinama pagal tai, kas nurodyta kaip priimta reikšmė HTML žymėjimas po to, kai galutinis vartotojas sąveikauja su forma anapus to įvesties. Tiesą sakant, :user-invalidjis buvo vadinamas „Vartotojo sąveikos pseudo klase“, nes jis yra unikalus nustatant vartotojo veiksmą renkantis elementą.
Paimkite šį HTML žymėjimą pagrindinei formai su skaitiniu lauku:
Skaitmeninis diapazonas, nustatytas įvesties HTML žymėjimo, yra tarp 1ir, 10bet nustatyta numatytoji reikšmė 11. Tai reiškia, kad vertė yra neteisinga, kai tik įkeliama forma.
Tačiau :user-invalidpseudoklasė įsigalios tik po to, kai vartotojas iš tikrųjų sąveikauja su forma, o ne ją įvedęs į lauką. Ta sąveika yra skirtumas tarp :user-invalidir :invalid. Tas pats principas taikomas už įvestų formų vertybes, kurios yra nustatytos pagal :in-range, :out-of-rangeir :required.
Nustačius, kad vartotojo įvesta vertė yra neteisingas įrašas, galime pasirinkti elementą:
input:user-invalid ( color: red; )Šis vaizdas iliustruoja įvairių valstybių tarp :validir :user-invalidremiantis HTML Pavyzdžiui aukščiau.
Painus dalykas čia yra tai, kaip glaudžiai susiję :invalidir :user-invalidyra. Jei naudojamas kartu, gali būti sunku atskirti šiuos du dalykus:
input:invalid ( color: red; ) input:user-invalid ( color: red; )
:invalid(centre) ir neteisingos vartotojo įvestos vertės (dešinėje) gali būti sunku atskirti
Naudojimasis vienas kitu ar skirtingų stilių pasirinkimas gali būti geresnė vartotojo patirtis realiame gyvenime.
Naršyklės palaikymas
:user-invalid šiuo metu nepalaikomas, tačiau siūlomas CSS „Selector“ 4 lygio darbo projekte.
„Firefox“ naudoja priešdėlį nestandartinę ypatybę, -moz-ui-invalidkuri priima panašius standartus.
Susijęs
:invalid:valid
Daugiau informacijos
- CSS selektorių 4 lygio specifikacija
- MDN specifikacija
:-moz-ui-invalid