Pseudoklasa valid

Pseudoklasa valid definiuje styl dla inputów, do których wprowadzono poprawną wartość lub wartość odpowiadającą określonemu typowi.

Składnia

cssselektor:valid {
  
}

Przykład

Zmieńmy kolor tła inputa na różowy, gdy wprowadzana jest nieprawidłowa wartość i z powrotem na zielony, gdy wartość przeszła weryfikację zgodności z wybranym typem:

html<p>Wprowadź swój email</p>
<p><input type="email"></p>

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

Результат:

Zobacz też