Met de :invalidselector kunt u elementen selecteren die geen geldige inhoud bevatten, zoals bepaald door het typeattribuut. :invalidwordt in de CSS Selectors Level 3-specificatie gedefinieerd als een "validiteitspseudo-selector", wat betekent dat het wordt gebruikt om interactieve elementen te stylen op basis van een evaluatie van gebruikersinvoer.
Deze selector heeft één specifiek doel: een gebruiker feedback geven terwijl hij een formulier op de pagina gebruikt. In het onderstaande voorbeeld wordt CSS gebruikt om de velden 'E-mail' rood of groen te maken, als reactie op de vraag of de inhoud wel of niet overeenkomt met een geldig e-mailadrespatroon:
Merk op hoe de eerste ("E-mail") groen-geldig is, zelfs als er geen inhoud in het veld staat. Dit komt omdat de invoer optioneel is, dus het blanco laten zou resulteren in een geldige indiening van het formulier. Om dit probleem op te lossen, heeft de tweede een "verplicht" attribuut, wat betekent dat een leeg veld zou resulteren in een ongeldige indiening van het formulier.
Nuttige Plaatsen
:invalidkan worden "geketend" met andere pseudo-selectors::focusvalideren alleen wanneer de gebruiker aan het typen is,:beforeof:afterpictogrammen of tekst genereren om meer gebruikersfeedback te geven, of attribuutselectorsinput(value="")valideren alleen invoervelden die inhoud bevatten.
Browser-ondersteuning
| Chrome | Safari | Firefox | Opera | D.W.Z | Android | iOS |
|---|---|---|---|---|---|---|
| 10.0+ | 5.0+ | 4.0+ | 10.0+ | 10+ | Nee | Nee |
:invalidwerd geïntroduceerd in CSS Selectors Module 3, wat betekent dat oude versies van browsers dit niet ondersteunen. De moderne browserondersteuning wordt echter steeds beter. Als u oudere browserondersteuning nodig hebt, polyfill, of gebruik deze selectors op niet-kritieke manieren, zoals progressieve verbetering, wat wordt aanbevolen.
