: bruker-ugyldig - CSS-triks

Anonim

Dette :user-invalider en CSS-pseudoklasse som er under forslag i CSS Selectors nivå 4 arbeidsutkast som velger et skjemaelement basert på om verdien som angitt av en bruker er gyldig når den sjekkes mot det som er spesifisert som en akseptert verdi i HTML-markeringen etter at sluttbrukeren har samhandlet med skjemaet utover den inngangen. Har faktisk :user-invalidblitt kalt "The User Interaction Pseudo-class" fordi det er unikt å identifisere en brukerhandling i valg av et element.

Ta følgende HTML-markering for et grunnleggende skjema med et numerisk felt:

Mengde:

Det numeriske området som er angitt av HTML-markeringen for inngangen, er mellom 1og 10men standardverdien er satt til 11. Det betyr at verdien er ugyldig så snart skjemaet lastes inn.

Imidlertid vil :user-invalidpseudoklassen ikke tre i kraft før etter at brukeren faktisk har samhandlet med skjemaet utover å legge den inn i feltet. Det samspillet er forskjellen mellom :user-invalidog :invalid. Det samme prinsippet gjelder for angitte skjemaverdier som er satt av :in-range, :out-of-rangeog :required.

Når verdien som brukeren har angitt er bestemt til å være en ugyldig oppføring, kan vi velge elementet:

input:user-invalid ( color: red; )

Følgende bilde illustrerer de forskjellige tilstandene mellom :valid, og :user-invalidbasert på HTML-eksemplet ovenfor.

Forskjellen mellom en gyldig verdi (venstre) og en ugyldig verdi angitt av en bruker etter interaksjon med skjemaet.

Den forvirrende tingen med her er hvor nært beslektede :invalidog :user-invalider. Hvis det brukes sammen, kan det være vanskelig å skille mellom de to:

input:invalid ( color: red; ) input:user-invalid ( color: red; )
Forskjellen mellom :invalid(sentrum) og en ugyldig verdi som er angitt av en bruker (høyre) kan være vanskelig å skille

Å bruke det ene over det andre eller ha en tydelig styling mellom de to kan vise seg å være en bedre brukeropplevelse i et reelt brukssak.

Nettleserstøtte

:user-invalid støttes for øyeblikket ikke, men er foreslått i CSS Selectors nivå 4 arbeidsutkast.

Firefox bruker en prefiks, ikke-standard egenskap -moz-ui-invalidsom vedtar lignende standarder.

I slekt

  • :invalid
  • :valid

Mer informasjon

  • CSS Selectors nivå 4 spesifikasjon
  • MDN Spesifikasjon for :-moz-ui-invalid