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);
}