Jump to content

Change background color of a drop-down list IE and

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 post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...