Select dropdown color changing

Question

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>

You need to integrate JavaScript/Jquery script for this task. I think you want to show red color only for selected country? — sohan verma, Jul 02 '18 at 09:51
@ ZenOut ,I want to change the color of the text pick a country on which we use to click to get dropdown options, Hope you understood my concern — Keerthi Kamarthi, Jul 02 '18 at 09:55

score 4 · Accepted Answer · edited Jun 20 '20 at 09:12

4

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

Warning

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.

Snippet

#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>

Explanation

#select-id {
  color: red;
}

Makes select and all options have color: red.

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

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

edited Jun 20 '20 at 09:12

Community

1
1

answered Jul 02 '18 at 09:51

Andrzej Ziółek

2,241
1
13
21

Andrzej Ziółek, thank you for your answer, but i want to change the color of the text pick a country on which we use to click to get dropdown options, Hope you understood my concern – Keerthi Kamarthi Jul 02 '18 at 09:55
I updated my snippet. Does it solve your problem now? – Andrzej Ziółek Jul 02 '18 at 09:57
Have you tested this? Try it on a Mac. It will not work in either Chrome or Safari. – Turnip Jul 02 '18 at 10:08
I have. Working on Chrome right now. – Andrzej Ziółek Jul 02 '18 at 10:09
On a Mac? I don't believe you. You can not style `option`s cross browser. – Turnip Jul 02 '18 at 10:10
Sure, will add annotation, but I don't think OP wanted cross-browser-multi-functional solution with external plugin. – Andrzej Ziółek Jul 02 '18 at 10:12
thank you so much Andrzej Ziółek, its working fine as per my requirement – Keerthi Kamarthi Jul 02 '18 at 10:24

score 0 · Answer 2 · answered Jul 02 '18 at 09:56

0

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;
 }

answered Jul 02 '18 at 09:56

Furkan Poyraz

672
1
4
14

hello furkan, its not working – Keerthi Kamarthi Jul 02 '18 at 10:01

score 0 · Answer 3 · edited Jul 05 '18 at 06:07

0

You can try this:

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

edited Jul 05 '18 at 06:07

Pang

9,564
146
81
122

answered Jul 02 '18 at 09:58

Kiran Varghese

51
5

Select dropdown color changing

3 Answers3

Warning

Snippet

Explanation