Dropdown Menu In Firefox style issue

[Zergman]

Search didn't seem to show me an existing post so here it goes.

 

I have dropdowns on my form.  They are meant to show 3 colors.  Green, Yellow, Red as the color, not the words.

<select name="box1" id="box1" class="textboxstyle" size="1">
  <option value="-" selected="selected">Please select</option>
  <option value="#00FF00" style="background-color: #00FF00"></option>
  <option value="#FFFF00" style="background-color: #FFFF00"></option>
  <option value="#FF0000" style="background-color: #FF0000"></option>
</select>

 

This works great in IE.  In Firefox, it shows the colors when the menu is dropped down but once one is selected, the box shows white.  The value is recorded, but looking at it, they are all just white regardless of what was selected.

 

I tried to remove the general styling but it didn't help

class="textboxstyle"

.textboxstyle {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: #000;
border: 1px solid #49166D;
background-color: #FFFFFF;
}

 

Any ideas?

[toephu]

i have the same issue,

any ideas?

 

[haku]

Firefox doesn't allow for the background colors of <options> to be set.

[toephu]

Firefox doesn't allow for the background colors of <options> to be set.

 

how about not changing the background by changing the colour of the text in the drop down?

currently i have mine setup with colors red green yellow, when you click the menu on the drop down it does show the colours correctly however once its already selected it does not show that colour

[ignace]

<select name="box1" id="box1" class="textboxstyle" size="1"

    style="background-color: #FFF" onchange="this.style.backgroundColor = this.options[this.selectedIndex].value">

  <option value="-" selected="selected">Please select</option>

  <option value="#00FF00" style="background-color: #00FF00">    </option>

  <option value="#FFFF00" style="background-color: #FFFF00">    </option>

  <option value="#FF0000" style="background-color: #FF0000">    </option>

</select>