HTML and CSS Reference
In-Depth Information
figure 6-73
style rule for elements that have the focus
selector for input, select, and
textarea elements that have the focus
changes the
background color
to light
green
◗
3.
Save your changes to the file and then refresh
survey.htm
in your Web browser.
◗
4.
Click the input box for the
street
field and verify that the background color
changes to a light green as the input box receives the focus (see Figure 6-74).
figure 6-74
changed background color for element that has the focus
active input element has th
e focus
with a light green background
Note that the
focus
pseudo-class is supported by all current browsers, so you can feel
confident in adding it to your Web forms.
Pseudo-Classes for Valid and Invalid Data
The
valid
and
invalid
pseudo-classes can be used to create styles for control elements
based on whether the field value associated with a control is valid or invalid. For exam-
ple, the style rule
input:invalid {
background-color: rgb(255, 220, 220);
}
displays all
input
elements for invalid data with a light red background, while the
style rule
input:valid {
background-color: rgb(220, 255, 220);
}
displays all
input
elements for valid data with a light green background. Both of these
style rules set the background color whether the
input
element has the focus or not.
Displaying a multitude of input boxes with different background colors can be confusing
and distracting to the user, however. To set the background color only when a field is valid
or invalid and the input box has the focus, you combine the two pseudo-classes as follows:
input:focus:invalid {
background-color: rgb(255, 220, 220);
}
Alice wants you to display all invalid data with a light red background when the
input
element has the focus. In addition, she wants you to add an image of a red x to
the input box background. For valid data, she wants the input box to be displayed with a
light green background along with a green check mark image.
