Pseudotřída invalid

Pseudotřída invalid nastavuje styl pro input, do kterého byla zadána nesprávná hodnota nebo hodnota neodpovídající zadanému typu.

Syntaxe

cssselektor:invalid {

}

Příklad

Pojďme přebarvit pozadí inputu na růžovou barvu, když je zadána nesprávná hodnota, a zpět na zelenou barvu, když hodnota prošla kontrolou odpovídající zvoleného typu:

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

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

Результат:

Viz také