Ο ψευδο-κλάσος 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,
που ορίζει στυλ για στοιχεία, των οποίων οι τιμές ξεφεύγουν από το εύρος
