:invalidIzbirnik omogoča, da izberete elemente, ki ne vsebujejo veljavne vsebine, kot je določeno z njeno typelastnost. :invalidje v specifikacijah CSS Selectors Level 3 opredeljen kot »psevdo-izbirnik veljavnosti«, kar pomeni, da se uporablja za oblikovanje interaktivnih elementov na podlagi ocene uporabnikovega vnosa.
Ta izbirnik ima eno posebno uporabo: zagotavlja uporabniku povratne informacije med interakcijo z obrazcem na strani. Spodnji primer uporablja CSS, da polja »E-pošta« obarva rdeče ali zeleno in se odziva na to, ali se vsebina ujema z veljavnim vzorcem e-poštnega naslova ali ne:
Upoštevajte, kako je prva (»E-pošta«) zeleno veljavna, tudi če na polju ni vsebine. To je zato, ker je vnos neobvezen, tako da bi, če bi bil prazen, prišlo do veljavne predložitve obrazca. Če želite odpraviti to vedenje, ima drugi atribut "required", kar pomeni, da bi prazno polje povzročilo neveljavno oddajo obrazca.
Zanimivosti
:invalidje mogoče "privezati" z drugimi psevdo-izbirniki: na primer:focuspotrditi velja, ko uporabnik tipka,:beforeali:afterustvariti ikone ali besedilo, da zagotovi več povratnih informacij uporabnikov, ali izbirniki atributov radiinput(value="")potrditi samo vnosna polja, ki vsebujejo vsebino.
Podpora za brskalnik
| Chrome | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 10,0+ | 5.0+ | 4.0+ | 10,0+ | 10+ | ne | ne |
:invalidje bil uveden v modulu CSS Selectors 3, kar pomeni, da ga stare različice brskalnikov ne podpirajo. Vendar je sodobna podpora za brskalnik boljša. Če potrebujete starejšo podporo brskalnika, bodisi polifil, bodisi uporabite te izbirnike na nekritične načine - postopno izboljšanje, kar je priporočljivo.