css change text color of all select options [duplicate]

Question

I'm trying to use css to change the text color of all most options for a country select but its not working.

CSS:

select option {
    color:white;
}

HTML:

<select>
    <option>Country</option>
    <!--many more-->
</select>

Answer 1

HTML:

<select id="country">
    <option>Country</option>
    <!--many more-->
</select>

CSS:

select#country {
    color: blue; //or whatever color you want
}

Answer 2

Just add class=classname to all the options as:

<option class=classname>Country1</option>
<option class=classname>Country1</option>

and then do

.classname{
    color:white
}

Answer 3

I don't think that will be possible since the select element is rendered using the native OS dropdown lists.

some browsers may support select styling but its wont work on all browsers for sure.

you will have to replace it with something like ul tag and do the functionality of select then style it with css.

luckily there are lots of plugins in the web that does this.

Answer 4

You can also put it in a class, and so it will allow you to manipulate and select individual children of that class. Here is how to do it:

HTML:

<select class="classname">
    <option>Country</option>
    <option>Country</option>

CSS:

Here you can call the class:

.classname option {
    color: white;
}