0

Usually when you create a <select> option field and use color to change the color. This applies only to when the dropdown is clicked upon and is in an active state.

Is it actually possible to change the color of the option that is selected? So if you look at the code, only make the option Apple red that is selected (when another fruit is selected, make that red). However, the colors of the text need to black in the dropdown.

select option {
  color: red;
}
<select>
  <option>Apple</option>
  <option>Banana</option>
  <option>Peach</option>
  <option>Strawberry</option>
  <option>Pineapple</option>
</select>

Since this component is a re-used one, I can not edit the HTML structure of it.

I tried to give the options a color, but this resulted in changed all of the option in the active dropdown and not the item selected.

I also looked up other topics and answers in here but every provided code also changes the color in the active dropdown state or they modify the HTML.

Adam
  • 5,495
  • 2
  • 7
  • 24
Yektos
  • 11
  • 3
  • https://stackoverflow.com/questions/7208786/how-to-style-the-option-of-an-html-select-element – vee Jan 13 '23 at 09:27

0 Answers0