HTML and CSS Reference
In-Depth Information
figure 6-72
Pseudo-classes for web form controls
Pseudo-Class
Matches
checked
Check boxes or options that are checked
default
The default user control element
disabled
Control elements that are disabled
enabled
Control elements that are enabled
focus
Control elements that have the focus (are actively selected) in the form
indeterminate
Check boxes or option buttons whose toggle states (checked or unchecked)
cannot be determined
in-range
Control elements whose values are within each field's range of values (between
the min and max attribute values)
invalid
Control elements whose values fail validation tests
Control elements that are optional (not required) in the Web form
optional
out-of-range
Control elements whose values are outside each field's range of values (outside
of the min and max attribute values)
required
Control elements that are required in the Web form
valid
Control elements whose values pass validation tests
For example, to create styles for all of the option buttons in a form that are checked,
you could apply the checked pseudo-class, as in the style rule
input[type=”radio”]:checked {
styles
}
where styles is the CSS styles applied to checked option buttons.
The first pseudo-class you'll apply to the survey form will be used to change the back-
ground color of any element that has the focus. focus refers to the state in which an ele-
ment has been clicked by the user, making it the active control element on the form. You
may have noticed that some browsers highlight or add a glowing border around control
elements that have the focus. Alice would like the control elements that have the focus to
be displayed with a light green background color.
To apply the focus pseudo-class:
1. Return to the forms.css file in your text editor.
2. At the bottom of the file, insert the following style rule, as displayed in
Figure 6-73:
/* Validation styles */
input:focus, select:focus, textarea:focus {
background-color: rgb(220, 255, 220);
}
Search WWH ::




Custom Search