css form dropdown list problem

On my site css file i have it so all form input backgrounds (textareas, dropdowns etc) have a background color black attribute.

However on o开发者_C百科ne page I'm trying to do a color section dropdown, with the background of each option a different color, eg: blue

This works, when the dropdown is opened, but when i select it, it doesnt show the background color in the currently selected field. Im not sure if the CSS is overriding it or what.

Anyone know how to bypass this? (Tried to explain best I could)

This is in my css file:

input,textarea,input,select,input,checkbox {
font-size:12px;
font-family:Verdana,Arial,Helvetica,sans-serif;
color:#98925C;
background-color:#000;
border:1px solid #413E22
}

and the code im using on my html page to make the form:

<select size="1" name="color">
<option value=blue style='background-color:blue'>blue</option>
<option value=red style='background-color:red'>red</option>
</select>

etc

---

When the <select> is open, you are seeing the <option> elements and their respective background colors. When you select an option, the <select> element closes its options, leaving you looking at only the <select> element. It makes sense that the <option> background-color does not affect the closed <select> element.

That being said, this looks like a solution:

<select onChange="this.style.backgroundColor=this.options[this.selectedIndex].style.backgroundColor">