Change color of selected item - select option

Question

Change color of selected item - select option

Navigation

#1 by (5 votes)

4

I have the following select .

Is it possible to change its blue color to one that I want to apply, for example red?

html css

asked by anonymous 07.05.2015 / 19:39

1 answer

How to apply chmod 777 with php in main folder and several subfolders at the same time Retrieve longer and shorter time-bound dates

score 5 · Accepted Answer

SELECT elements are rendered by the operating system, not HTML. You can not change this blue color because it is OS default.

"The alternative is to use libraries that customize the select, usually turned them into dropdowns and others (Example: bootstrap select - silviomoreto. github.io/bootstrap-select ). "

But you can change some things without using dropdowns:

var select = document.getElementById('mySelect');
select.onchange = function () {
    select.className = this.options[this.selectedIndex].className;
}

.redText {
    background-color:#F00;
}
.greenText {
    background-color:#0F0;
}
.blueText {
    background-color:#00F;
}

<select id="mySelect" class="greenText">
    <option class="greenText" value="apple" >Apple</option>
    <option class="redText"   value="banana" >Banana</option>
    <option class="blueText" value="grape" >Grape</option>
</select>