0

I am trying to display a drop down list in HTML. I managed to do so easilly in internet explorer, but I have a problem when I use it on google chrome.

I create the following css for the background color of the options in the select tag:

option.red{background-color: #FF0000;}
option.green{background-color: #00FF00;}
option.blue{background-color: #0000FF;}

Then, in my select tag, I have 

<option class="red" value="red" selected="selected" >blabla</option>
<option class="green" value="green">blabla</option>
<option class="blue" value="blue">blabla</option>

In google chrome, the background color of the options works good, the first option is the one selected by default (I know this because of prints), but the background color of the select item is white.

This is weird because it only does so on google chrome

If anybody knows how to set the color of the select item to the color of its selected option color, it would be great

Thank you

Mat
  • 202,337
  • 40
  • 393
  • 406
Mtrompe
  • 351
  • 5
  • 15

1 Answers1

3

Based on an existing answer, you can try this:

var sel = document.getElementById('select_id');
sel.addEventListener('click', function(el){
    var options = this.children;
    for(var i=0; i < this.childElementCount; i++){
        options[i].style.color = 'gray';
    }
    var selected = this.children[this.selectedIndex];
        selected.style.color = 'red';
    }, false);

JSBin example also available.

Community
  • 1
  • 1
balexandre
  • 73,608
  • 45
  • 233
  • 342
  • This code only allows to change the color of the options inside the select tag. My problem is not that. My options have their background color, but when I select an option, the select tag puts the selected option's value inside but does not display it with the right color. This problem only occurs in google chrome – Mtrompe Jun 01 '12 at 08:42
  • every browser has it's own way of dealing with form elements, you need to tweek that code to allow you do accomplish what you need. – balexandre Jun 01 '12 at 09:04