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

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

Σύνταξη

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

Παράδειγμα

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

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

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

Результат:

Δείτε επίσης