change form fields onfocus and onblur

Posted on 2009-04-20
Last Modified: 2013-11-19
Hi - I'd like to change the border and background color of form fields when the user clicks on them, or tabs to them.  Then when the user clicks away,  the form field reverts to its previous look.  
Can someone please show me how this is done?
TIA your input.
Question by:dzash2000
    LVL 6

    Accepted Solution

    Maybe you can use this:
    function toggleFocus(theElement) {
    	if ( == "lightgrey" ) {
  = "white";
  = "black";
    	else {
  = "lightgrey";
  = "red";
    #myText {
    	border: 1px solid #000;
    <input name="myText" id="myText" onfocus="toggleFocus(this);" onblur="toggleFocus(this);>

    Open in new window


    Author Comment

    JoachimMartin - this works on text fields.  
    I guess I should have stated form elements instead of form fields.
    Is it possible to make it work just as well on other types of form elements - like select lists, check boxes?

    Featured Post

    How to run any project with ease

    Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
    - Combine task lists, docs, spreadsheets, and chat in one
    - View and edit from mobile/offline
    - Cut down on emails

    Join & Write a Comment

    Suggested Solutions

    Shoutout to Emily Plummer ( for giving me this article! She did most of it, I just finished it up and posted it for her :)    Introduction In a previous article (http://www.experts-exchang…
    SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
    The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
    The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

    755 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    18 Experts available now in Live!

    Get 1:1 Help Now