The valid pseudo-class

The valid pseudo-class sets the style for inputs in which a valid value or a value corresponding to the specified type was entered.

Syntax

cssselector:valid {
  
}

Example

Let's recolor an input background to pink when an invalid value is entered and back to green when the value passes the check for the selected type:

html<p>Enter Your email</p>
<p><input type="email"></p>

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

Результат:

See also