HTML and CSS Reference
In-Depth Information
2.4.3. Styling invalid elements using CSS3 pseudo-classes
One way to style invalid elements would be to iterate over the fields, checking if each one
is invalid and applying CSS classes to those that have errors. But this is a bit cumbersome,
and you can do this much more elegantly using a bit of CSS3 magic.
CSS3 introduces a range of new pseudo-classes for styling form fields based on their valid-
ity. These styles will be applied only if the condition defined by the pseudo-class is true.
The following self-explanatory pseudo-classes are available:
•
:valid
•
:invalid
•
:in-range
•
:out-of-range
•
:required
•
:optional
As you can probably guess, pseudo-classes make styling invalid fields easy. For example,
the following code would style any element declared invalid by the Constraint Validation
API with a light red background and a maroon border:
:
invalid
{
background-color
: #FFD4D4;
border
: 1px solid maroon;
}
But this declaration has a problem: Any field that uses validation attributes like
required
or
pattern
will be initially invalid because these order form fields are blank. As a result,
those fields that apply validation attributes will display a red background and maroon bor-
der, which isn't nice.
