Pseudoclasse invalid

La pseudoclasse invalid definisce lo stile per un campo di input in cui è stato inserito un valore non valido o un valore che non corrisponde al tipo specificato.

Sintassi

cssselettore:invalid {

}

Esempio

Cambiamo il colore di sfondo dell'input in rosa quando viene inserito un valore non valido e torniamo al verde quando il valore supera la convalida del tipo selezionato:

html<p>Inserisci la tua email</p>
<p><input type="email"></p>

cssinput:invalid {
  background: #E37D76;
}
input:valid {
  background: #9DDFA4;
}

Результат:

Vedi anche

la pseudoclasse :valid,
che definisce lo stile per un input in cui è stato inserito un valore valido
la pseudoclasse :default,
che definisce lo stile per gli elementi predefiniti
la pseudoclasse :in-range,
che definisce lo stile per gli elementi con un intervallo di valori specificato
la pseudoclasse :out-of-range,
che definisce lo stile per gli elementi i cui valori sono al di fuori dell'intervallo