How to change selected item text color of select in css

user_13436120 0
Viewed 447

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>

sass css html javascript
2 Answers

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.

user_64265120 

 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>

user_105510760
Related