Highlighting Form Fields

Highlighting Form Fields


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


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;


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