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
selector: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:
<p>Enter Your email</p>
<p><input type="email"></p>
input:invalid {
background: #E37D76;
}
input:valid {
background: #9DDFA4;
}
:
See also
-
the
:invalidpseudo-class
that sets a style for the input into which an invalid value was entered -
the
:out-of-rangepseudo-class
that styles elements whose values are out of range -
the
:in-rangepseudo-class
that sets a style to elements with a given range of values
