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"
<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.
Search WWH ::

Custom Search