: bruger-ugyldig - CSS-tricks

Anonim

Det :user-invalider en CSS-pseudoklasse, der er under forslag i CSS-vælgernes niveau 4-arbejdsudkast, der vælger et formelement baseret på, om værdien - som indtastet af en bruger - er gyldig, når den kontrolleres mod det, der er angivet som en accepteret værdi i HTML-markeringen, efter at slutbrugeren har interageret med formularen ud over denne input. Faktisk :user-invalider det blevet kaldt “The User Interaction Pseudo-class”, fordi det er unikt at identificere en brugerhandling ved valg af et element.

Tag følgende HTML-markering til en grundlæggende formular med et numerisk felt:

Antal:

Det numeriske interval, der er indstillet af HTML-markeringen for input, er mellem 1og 10men standardværdien er indstillet til 11. Det betyder, at værdien er ugyldig, så snart formularen indlæses.

Men den :user-invalidvil pseudo-klasse først i kraft, efter at brugeren faktisk har interageret med formularen ud at indtaste den i feltet. Denne interaktion er forskellen mellem :user-invalidog :invalid. Det samme princip gælder for indtastede formværdier, der er angivet af :in-range, :out-of-rangeog :required.

Når den værdi, som brugeren har indtastet, er bestemt til at være en ugyldig post, kan vi vælge elementet:

input:user-invalid ( color: red; )

Det følgende billede illustrerer de forskellige tilstande mellem :validog :user-invalidbaseret på HTML-eksemplet ovenfor.

Forskellen mellem en gyldig værdi (venstre) og en ugyldig værdi indtastet af en bruger efter interaktion med formularen.

Den forvirrende ting med her er hvor nært beslægtet :invalidog :user-invalider. Hvis det bruges sammen, kan det være svært at skelne mellem de to:

input:invalid ( color: red; ) input:user-invalid ( color: red; )
Forskellen mellem :invalid(center) og en ugyldig værdi indtastet af en bruger (højre) kan være vanskelig at skelne mellem

Brug af det ene over det andet eller har en tydelig styling mellem de to kan vise sig at være en bedre brugeroplevelse i et virkeligt brugssag.

Browsersupport

:user-invalid understøttes i øjeblikket ikke, men foreslås i CSS Selectors niveau 4 arbejdsudkast.

Firefox bruger en præfikset ikke-standardegenskab, -moz-ui-invalidder vedtager lignende standarder.

Relaterede

  • :invalid
  • :valid

Mere information

  • CSS-vælgerniveau 4 Specifikation
  • MDN Specifikation for :-moz-ui-invalid