The invalid pseudo-class
The invalid pseudo-class sets a style
for an input that has an invalid value or a
value that does not match the specified type.
Syntax
selector:invalid {
}
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
:validpseudo-class
that sets a style for the input into which a valid value was entered -
the
:defaultpseudo-class
that sets a default style for elements -
the
:in-rangepseudo-class
that sets a style to elements with a given range of values -
the
:out-of-rangepseudo-class
that styles elements whose values are out of range
