How to change selected item text color of select in css

Question

I am trying to change the selected item of color in css . I tried but I am failed could someone please help me how to achieve my goals .

Thanks

select option:checked {
  color: #000 !important;
}

<select className="form-control input-box" {...input} required>
  <option value="">Task Type</option>
  <option value="Meeting">Meeting</option>
  <option value="FollowUp">Follow Up</option>
  <option value="Viewing">Viewing</option>
  <option value="reminder">Reminder</option>
  <option value="other">Other</option>
</select>

Can you describe your question in more detail? Do you want to change the color of selected item? or background of selected item? — Yatendrasinh Joddha, May 18 '20 at 11:36
@YatendrasinhJoddha OP wants to change the color of the selected option. — Dejan.S, May 18 '20 at 11:37
@YatendrasinhJoddha Yes, I want to change the color of selected item — Jonas, May 18 '20 at 11:40
I think your code is working. Just try to change color that you are applying in css. https://jsfiddle.net/2t4w31ex/ check this. — Yatendrasinh Joddha, May 18 '20 at 11:42
Does this answer your question? [How to change the text color of first select option](https://stackoverflow.com/questions/17608880/how-to-change-the-text-color-of-first-select-option) — Zohini, May 18 '20 at 11:46
No, actually I want to change the color of specific selected item from dropdown — Jonas, May 18 '20 at 11:48

score 1 · Answer 1 · answered May 19 '20 at 00:24

Dropdowns are based on the user's operating system and not the browser per se. The best way to style dropdowns is to hide the default one and create a pseudo one instead.

Go through https://www.w3schools.com/howto/howto_custom_select.asp to find out how to implement this trick.

kompaniietst · Answer 2 · 2020-05-18T11:36:46.863

 select {
    color:red;
}

option:not(:checked) { 
    color:black;
 }

<select className="form-control input-box">
        <option value="">Task Type</option>
        <option value="Meeting">Meeting</option>
        <option value="FollowUp">Follow Up</option>
        <option value="Viewing">Viewing</option>
        <option value="reminder">Reminder</option>
        <option value="other">Other</option>
    </select>

How to change selected item text color of select in css

2 Answers2