Jump to content

Change background color of a drop-down list IE and


jefkin
 Share

Recommended Posts

Hi everyone, Just wanted to make my first post here count. A) Everytime I have a tough issue with web design/programing/ui, this site is one of my first 'go-to' places to find answers.That said, contrary to the prohibition on page:DHTML ExamplesI found a way to make a drop down change color with every browser I've tried.I've included my code.

<script>var sel;    // variable for holding an HTML DOM select objectvar opt;    // variable for holding an HTML DOM option objectfunction color_me(id){   if ((sel = document.getElementById(id)) &&       (opt = sel.options[sel.selectedIndex]))   {     // note this if should be commented out, unless you want to flip images with your     // color changes     /*     ** commenting -- not important here     **     if ((img    = document.getElementById('img_'      + id)) &&         (newimg = document.getElementById('flag_id_'  + opt.value)))     {       img.src = newimg.src;     }     **     ** end image swap code.     */     sel.style.backgroundColor = opt.style.backgroundColor;     sel.style.color           = opt.style.color;   }}</script><select id="flag_sel" name="sel_color" onChange="color_me('flag_sel');"><option value="7" SELECTED style="background:orange;color:#000;">orange</option>      	      <option value="1" style="background:white;color:#000;">white</option>      	      <option value="4" style="background:cyan;color:#000;">cyan</option>      	      <option value="5" style="background:gray;color:#000;">gray</option>      	      <option value="6" style="background:green;color:#fff;">green</option>      	      <option value="8" style="background:purple;color:#fff;">purple</option>      	      <option value="10" style="background:yellow;color:#000;">yellow</option>      	      <option value="12" style="background:lightslategray;color:#fff;">lightslategray</option>      	      <option value="14" style="background:sienna;color:#fff;">sienna</option>      	      <option value="15" style="background:teal;color:#fff;">teal</option></select><script>color_me('flag_sel');</script>

I tested the exact code above in your handy-dandy 'try-it' interface, and it works great.I'd be interested if you could find a place (browser) where this doesn't work. It's pretty straight forward. The only tricky part I commented out (but left there for any guru's interest).Jefkin

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...