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

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

Σύνταξη

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

}

Παράδειγμα

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

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

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

Результат:

Δείτε επίσης