Tā :user-invalidir CSS pseidoklase, kas tiek piedāvāta CSS Selectors 4. līmeņa darba projektā un atlasa formas elementu, pamatojoties uz to, vai lietotāja ievadītā vērtība ir derīga, ja tiek pārbaudīta vērtība, kas norādīta kā pieņemtā vērtība HTML marķējums pēc tam, kad galalietotājs ir mijiedarbojies ar veidlapu, kas pārsniedz šo ievadi. Faktiski to :user-invalidsauca par “Lietotāju mijiedarbības pseidoklasi”, jo tā ir unikāla, identificējot lietotāja darbību, izvēloties elementu.
Veiciet šādu HTML marķējumu pamata veidlapai ar ciparu lauku:
Skaitliskais diapazons, ko ievadei ir iestatījis HTML marķējums, ir starp 1un, 10bet noklusējuma vērtība ir iestatīta uz 11. Tas nozīmē, ka vērtība ir nederīga, tiklīdz veidlapa tiek ielādēta.
Tomēr :user-invalidpseidoklase stāsies spēkā tikai pēc tam, kad lietotājs būs faktiski mijiedarbojies ar veidlapu pēc tās ievadīšanas laukā. Šī mijiedarbība ir atšķirība starp :user-invalidun :invalid. Tas pats princips attiecas uz ievadītajiem formas vērtībām, kuras noteiktas ar :in-range, :out-of-rangeun :required.
Kad lietotāja ievadītā vērtība tiek atzīta par nederīgu ierakstu, mēs varam atlasīt elementu:
input:user-invalid ( color: red; )Šis attēls ilustrē dažādos stāvokļus starp iepriekšminētajiem HTML piemēriem :validun to :user-invalidpamatā.
Mulsinošā lieta šeit ir tā, cik cieši saistītas :invalidun :user-invalidir saistītas . Ja tos lieto kopā, var būt grūti atšķirt abus:
input:invalid ( color: red; ) input:user-invalid ( color: red; )
:invalid(centrā) un nederīgu vērtību, ko ievadījis lietotājs (pa labi), var būt grūti atšķirt
Lietošana viena virs otras vai atšķirīgs stils starp abiem var izrādīties labāka lietotāja pieredze reālajā dzīvē.
Pārlūka atbalsts
:user-invalid pašlaik netiek atbalstīts, bet ir ierosināts CSS Selectors 4. līmeņa darba projektā.
Firefox izmanto prefiksu nestandarta rekvizītu, -moz-ui-invalidkas pieņem līdzīgus standartus.
Saistīts
:invalid:valid
Vairāk informācijas
- CSS selektoru 4. līmeņa specifikācija
- MDN specifikācija
:-moz-ui-invalid