Den :invalidvælgeren kan du vælge elementer, der ikke indeholder gyldigt indhold, som bestemmes af dens typeattribut. :invalider defineret i CSS Selectors niveau 3 spec som en "gyldighedspseudovælger", hvilket betyder at den bruges til at style interaktive elementer baseret på en evaluering af brugerinput.
Denne vælger har en særlig anvendelse: at give en bruger feedback, mens de interagerer med en formular på siden. Eksemplet nedenfor bruger CSS til at gøre “E-mail” -felterne røde eller grønne og reagere på, om indholdet matcher et gyldigt e-mail-adressemønster eller ej:
Bemærk, hvordan den første (“E-mail”) er grøn-gyldig - selv når der ikke er noget indhold i marken. Dette skyldes, at input er valgfrit, så det at lade det være tomt vil resultere i en gyldig formularindsendelse. For at rette op på denne adfærd har den anden en "krævet" attribut, hvilket betyder, at et tomt felt ville resultere i en ugyldig formularindsendelse.
Interessepunkter
:invalidkan "lænkes" sammen med andre pseudovælgere: som:focuskun at validere, når brugeren skriver,:beforeeller:afterat generere ikoner eller tekst for at give mere brugerfeedback, eller attributvælgerinput(value="")kun at validere inputfelter, der indeholder indhold.
Browsersupport
| Chrome | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 10.0+ | 5.0+ | 4.0+ | 10.0+ | 10+ | Nix | Nix |
:invalidblev introduceret i CSS Selectors Module 3, hvilket betyder, at gamle versioner af browsere ikke understøtter det. Moderne browsersupport bliver dog bedre. Hvis du har brug for ældre browsersupport, enten udfylde eller bruge disse vælgere på ikke-kritiske måder á la progressiv forbedring, hvilket anbefales.