Recipe 7.14. Highlighting Form Fields


Problem

You want to highlight the form field that a visitor is currently using.

Solution

Use the :focus pseudo-class selector.

With a preexisting form, create a new CSS rule that changes the background color when an input element is being used (see Figure 7-22).

Figure 7-22. Background color of input field changes as text is entered


This rule makes changes the background color of the field:

input:focus {  background-color: yellow; }

Discussion

The browsers that support :focus are Netscape Navigator 6+, Firefox, Safari, and Opera 7. Browsers that don't support the declaration block will simply ignore it, making it degrade gracefully.

See Also

Recipe 7.4, concerning styling for textarea elements; Table D-9 in Appendix D.




CSS Cookbook
CSS Cookbook, 2nd Edition
ISBN: 0596527411
EAN: 2147483647
Year: 2006
Pages: 235

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net