Highlighting Form Fields






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).

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.



 Python   SQL   Java   php   Perl 
 game development   web development   internet   *nix   graphics   hardware 
 telecommunications   C++ 
 Flash   Active Directory   Windows