Il :invalidselettore consente di selezionare elementi che non contengono contenuto valido, come determinato dal suo typeattributo. :invalidè definito nella specifica CSS Selectors Level 3 come uno "pseudo-selettore di validità", il che significa che viene utilizzato per definire gli elementi interattivi sulla base di una valutazione dell'input dell'utente.
Questo selettore ha un uso particolare: fornire un feedback a un utente mentre sta interagendo con un modulo sulla pagina. L'esempio seguente utilizza CSS per trasformare i campi "Email" in rosso o in verde, rispondendo al fatto che i contenuti corrispondano o meno a un modello di indirizzo email valido:
Nota come la prima ("Email") è verde-valida, anche quando non c'è contenuto nel campo. Questo perché l'input è facoltativo, quindi lasciarlo vuoto comporterebbe un invio di modulo valido. Per correggere questo comportamento, il secondo ha un attributo "obbligatorio", il che significa che un campo vuoto risulterebbe in un invio di modulo non valido.
Punti di interesse
:invalidpuò essere "concatenato" con altri pseudo-selettori: come:focusconvalidare solo quando l'utente sta digitando,:beforeo:aftergenerare icone o testo per fornire più feedback dell'utente, o selettori di attributi comeinput(value="")convalidare solo i campi di input contenenti contenuto.
Supporto browser
| Cromo | Safari | Firefox | musica lirica | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 10.0+ | 5.0+ | 4.0+ | 10.0+ | 10+ | no | no |
:invalidè stato introdotto nel modulo 3 dei selettori CSS, il che significa che le vecchie versioni dei browser non lo supportano. Tuttavia, il supporto del browser moderno sta migliorando. Se è necessario il supporto di browser meno recenti, utilizzare polyfill o utilizzare questi selettori in modi non critici come il miglioramento progressivo, consigliato.