HTML and CSS Reference
In-Depth Information
Taking advantage of validation with CSS
In addition to the visible support in the browser for validation (the
messages you've seen in the earlier screenshots),
HTML5
provides
behind-the-scenes hooks for
CSS
and JavaScript. These let you pro-
vide immediate visual feedback.
CSS
has two pseudo-classes that allow
you to provide different styles based on whether they're currently valid
or invalid.
Here's a simple pair of
CSS
rules to put a
green outline around valid controls and a
dotted red outline around invalid controls:
input:valid {
outline: 5px solid green;
}
input:invalid {
outline: 5px dashed red;
}
The images show the result of applying this
CSS
to these three number controls:
<input type="number" required>
<input type="number" min="4"
value="4">
<input type="number" min="4" value="3">
In real life, of course, you wouldn't specify something
invalid as the default value! Note that the validity
state applies even if the form isn't submittable.
