Ο ψευδο-κλάσος invalid

Ο ψευδο-κλάσος invalid ορίζει το στυλ για ένα input στο οποίο εισήχθη λανθασμένη τιμή ή τιμή που δεν αντιστοιχεί στον καθορισμένο τύπο.

Σύνταξη

επιλογέας:invalid {

}

Παράδειγμα

Ας αλλάξουμε το χρώμα του φόντου του input σε ροζ, όταν εισάγεται λανθασμένη τιμή και πίσω σε πράσινο χρώμα, όταν η τιμή πέρασε τον έλεγχο συμμόρφωσης με τον επιλεγμένο τύπο:

<p>Εισάγετε το email σας</p>
<p><input type="email"></p>

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

Δείτε επίσης

ο ψευδο-κλάσος :valid,
που ορίζει στυλ για input στο οποίο εισήχθη σωστή τιμή
ο ψευδο-κλάσος :default,
που ορίζει στυλ για τα στοιχεία by default
ο ψευδο-κλάσος :in-range,
που ορίζει στυλ για στοιχεία με καθορισμένο εύρος τιμών
ο ψευδο-κλάσος :out-of-range,
που ορίζει στυλ για στοιχεία, των οποίων οι τιμές ξεφεύγουν από το εύρος