Change Text Color of Selected Option in a Select Box

Question

I have a select box. The options have been styled with different colors via a CSS file that has been referenced. I want to be able to select an option and change the text co

Answer 1

ONE COLOR CASE - CSS only

Just to register my experience, where I wanted to set only the color of the selected option to a specific one.

I first tried to set by css only the color of the selected option with no success.

Then, after trying some combinations, this has worked for me with SCSS:

select {
      color: white; // color of the selected option

      option {
        color: black; // color of all the other options
      }
 }

Take a look at a working example with only CSS:

select {
  color: yellow; // color of the selected option
 }

select option {
  color: black; // color of all the other options
}

    Apple
    Banana
    Grape

For different colors, depending on the selected option, you'll have to deal with js.