New Revised CSS Library Forums Web Tools
FAQs Awards Usage Terms Contact
Categories
Other Sections
Sweet Ads
Compatibility
Bookmark online:

FF1+ IE5+ Opr7+

Highlight form element

Author: Dynamic Drive

Note: Modified 06/28/02. Tabbing through form using keyboard now also triggers the highlight effect

Description: Increase the "intuitiveness" of filling out forms on your site with this script. It applies coloring to the form element in focus, better indicating which one the user is currently on. Functions in both IE4+ and NS6+, degrading well as always with the rest.

Demo: Try setting focus on the various form elements below:

Name:        
Comments:
Selection:      
                


Directions: Developer's View

Step 1: Add the below script to the <HEAD> section of your page:

Select All

Step 2: With the above script is installed, all that's left in adding a simple onClick event handler into the <FORM> tag in question. For example:

<FORM onKeyUp="highlight(event)" onClick="highlight(event)">
"
"
</FORM>

The effect can be added to more than one form on the same page. Enjoy!

Technical Note:

CSS level 2 actually supports a very simple way of accomplishing the above. Unfortunately only NS6 at this time recognizes the code. To learn more about this, please see the following tutorial.