Pseudotřída valid

Pseudotřída valid nastavuje styl pro inputy, do kterých byl zadán platný obsah nebo hodnota odpovídající zadanému typu.

Syntaxe

cssselektor:valid {
  
}

Příklad

Pojďme změnit barvu pozadí inputu na růžovou, když je zadána neplatná hodnota, a zpět na zelenou, když hodnota prošla kontrolou odpovídajícího typu:

html<p>Zadejte svůj email</p>
<p><input type="email"></p>

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

Результат:

Viz také