Det :user-invalidär en CSS-pseudoklass som föreslås i arbetsutkastet för CSS-väljare nivå 4 som väljer ett formulärelement baserat på huruvida värdet - som anges av en användare - är giltigt när det kontrolleras mot det som anges som ett accepterat värde i HTML-markeringen efter att slutanvändaren har interagerat med formuläret bortom den ingången. I själva verket :user-invalidhar det kallats "The User Interaction Pseudo-class" eftersom det är unikt när det gäller att identifiera en användaråtgärd vid val av ett element.
Ta följande HTML-markering för en grundform med ett numeriskt fält:
Det numeriska intervallet som anges av HTML-markeringen för ingången är mellan 1och 10men standardvärdet har ställts in på 11. Det betyder att värdet är ogiltigt så snart formuläret laddas.
Men :user-invalidkommer pseudo klassen inte träda i kraft förrän efter det att användaren har faktiskt interagerat med formuläret bortom in det i fältet. Den interaktionen är skillnaden mellan :user-invalidoch :invalid. Samma princip gäller för angivna formulärvärden som ställs in av :in-range, :out-of-rangeoch :required.
När värdet som användaren har angett är bestämt att vara en ogiltig post kan vi välja elementet:
input:user-invalid ( color: red; )Följande bild illustrerar de olika tillstånden mellan :validoch :user-invalidbaserat på HTML-exemplet ovan.
Det förvirrande med här är hur nära släkt :invalidoch :user-invalidär. Om det används tillsammans kan det vara svårt att skilja mellan de två:
input:invalid ( color: red; ) input:user-invalid ( color: red; )
:invalid(center) och ett ogiltigt värde som anges av en användare (höger) kan vara svårt att skilja
Att använda varandra eller ha tydlig styling mellan de två kan visa sig vara en bättre användarupplevelse i ett verkligt användningsfall.
Webbläsarstöd
:user-invalid stöds för närvarande inte men föreslås i CSS Selectors nivå 4 arbetsutkast.
Firefox använder en prefixad icke-standardegenskap -moz-ui-invalidsom antar liknande standarder.
Relaterad
:invalid:valid
Mer information
- CSS-väljare nivå 4-specifikation
- MDN Specifikation för
:-moz-ui-invalid