SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    googlicious graymatter bvarvel's Avatar
    Join Date
    Sep 2002
    Location
    Katy, TX
    Posts
    952
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Change Background Color of Form Elements?

    I know I can set the background color for each form element using the onfocus and onblur events, but I'm wondering if there is anyway to do this on a global scale, where I can just include a script on a page, and all form elements by default would change background colors when they have the focus?

    Any help?
    b.

  2. #2
    SitePoint Wizard
    Join Date
    Dec 2003
    Location
    USA
    Posts
    2,582
    Mentioned
    29 Post(s)
    Tagged
    0 Thread(s)
    Just so you know, onfocus and onblur are IE specific, thus not really standards-compliant. I recommend using something like onmousedown, onmouseup, onmouseover, onmousemove, onclick, or onmouseout. onmouseover or onclick would probably be best for your likely case.

    That being said, the form element does have support for all the same events that input and other form elements have (including those just listed, onblur, and onfocus (in IE only)), so you can just use the same method you use for the others.

    Something like:
    Code:
    <form id="myform" onclick="setActive();" onmouseout="setDeactive();">
    ...
    </form>
    Code:
    function setActive()
    {
    document.getElementById("myform").style = "background-color: blue;";
    }
    
    function setDeactive()
    {
    document.getElementById("myform").style = ""; // back to default
    }
    would probably work fairly well. You'd have to play around with it. If you are only targeting IE users, go ahead and use onblur or onfocus, but if you want a wider audience, try out some of the standard events instead.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •