HTML and CSS Reference
In-Depth Information
• Use JavaScript/jQuery code to customize the way validation messages for input
fields are displayed.
The former technique is suitable in situations where you wish to customize the appearance of an
input field and you aren't interested in changing the way validation messages are displayed. The latter
approach gives you total control over how and where validation messages are displayed. It involves
handling the input field's invalid event and writing custom logic to display validation messages.
Customizing the Appearance of an Input Field
Using CSS Pseudo-Classes
Whenever there is a validation error, the browser pops up a callout that displays the validation error
message (see Figure 5-2). Although browsers don't allow you to customize the appearance of the validation
message callout, you can customize how an input field looks when a validation rule is broken. The trick is
to write specific CSS pseudo-classes.
n Note A CSS pseudo-class is a class that is applied to elements based on their state. For example, an anchor
( <a> ) tag has pseudo-classes link , visited , hover , and active , which represent the corresponding state of a
hyperlink. The CSS pseudo-classes discussed in this section come from the CSS3 specification.
Table 5-2 lists the pseudo-classes you can use with HTML5 validations.
Table 5-2. Pseudo-Classes for Customizing Input Fields
Applies to input elements that contain valid values.
Applies to input elements that contain invalid values.
Applies to input elements whose value is between the min and max values.
Applies to input elements whose value is outside the min and max limits.
Applies to input elements that are marked as required.
Applies to input elements that aren't marked as required.
Listing 5-14 uses many of the CSS pseudo-classes mentioned in Table 5-2 to customize the
appearance of input fields in the event of validation errors.
Listing 5-14. Sample Pseudo-Classes to Customize Input Fields
input:invalid {
background-color: #ffd800;
border: 2px solid #f00;
input:required {
background-color: #ffd800;
border: 2px solid #f00;
input:out-of-range {
Search WWH ::

Custom Search