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>

Answer 1

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.

Answer 2

 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>