Select dropdown color changing [duplicate]

This question already has an answer here:

I have created a sample dropdown list (the code is below). I want to change the font color of the "Pick a Country" which is displaying in the select option: The default text color is black and I want to change it to red.

<select id="select-id">
<option value="" selected="">Pick a Country</option>
<option value="">India</option>
<option value="">Sri Lanka</option>
<option value="">Sweden</option>


This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.

option

3 Answers
3

I believe below solution gets what you want. Just few lines of CSS (explanation below snippet)

Styling <select> and <option> elements is not supported across all browsers, because they are rendered by OS, not browser. There are external libraries that create select-like elements composed from HTML elements that can be styled. Below solution is not 100% safe.

<select>

<option>

#select-id {
color: red;
}

#select-id option:not(:checked) {
color: initial;
}

<select id="select-id">
<option value="" selected="">Pick a Country</option>
<option value="">India</option>
<option value="">Sri Lanka</option>
<option value="">Sweden</option>
</select>

#select-id {
color: red;
}


Makes select and all options have color: red.

color: red

#select-id option:not(:checked) {
color: initial;
}


Makes not-selected options have initial color, which is black.

option

You can either style the first option or you can apply a class to it.

With first selector:

#select-id option:first-child {
color: red;
}


With class selector:

#select-id .placeholder {
color: red;
}


You can try this:

select option:first-child{
color: red;
}