HTML and CSS Reference
In-Depth Information
To set styles for the valid and invalid data:
◗
1.
Return to the
forms.css
file in your text editor. At the bottom of the file, add the
following style rule for input boxes containing valid data:
input:focus:valid {
background: rgb(220, 255, 220) url(go.png) bottom right
no-repeat;
-o-background-size: contain;
-moz-background-size: contain;
-webkit-background-size: contain;
background-size: contain;
}
◗
2.
Add the following style rule for invalid data:
input:focus:invalid {
background: rgb(255, 232, 233) url(stop.png) bottom right
no-repeat;
-o-background-size: contain;
-moz-background-size: contain;
-webkit-background-size: contain;
background-size: contain;
}
Figure 6-75 displays the content of the new style rules.
figure 6-75
style rules for valid and invalid field values
displays the
go.png
image
file in the bottom-right
corner of the input box on
a light green background
style rule for va
lid
data values
resizes the image so
that it is contained
within the input box
style rule for in
valid
data values
displays the
stop.png
image file in the
bottom-right corner
of the input box on a
light red backgr
ound
resizes the image so
that it is contained
within the input box
◗
3.
Save your changes to the file and then refresh
survey.htm
in your Web browser.
◗
4.
Test the inline validation by typing the postal code value
32175-6136
into the
zip
field. Note that the background of the input box provides immediate visual
feedback on whether the data value you enter is currently valid or invalid (see
Figure 6-76).
