CODEWITHSUNDEEP
htmlgoogle-chromecolorshtml-select
Mtrompe
Mtrompe

Reputation: 361

Set color of select HTML item in google chrome

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

Upvotes: 0

Views: 3017

Answers (1)

balexandre
balexandre

Reputation: 75073

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.

Upvotes: 3

Related Questions