How can I change the selected option's text color?

Viewed 478

I've changed the selected option's background color to pink.

enter image description here

However, when I select the option, it sets the color to white, which I don't like.

enter image description here

How can I change it to something else? I've tried setting the color property, but to no avail:

select > option:checked {
  background: linear-gradient(pink, pink);
  color: black !important; /* doesn't work */
}

Here's my fiddle.

Is this possible in Chrome?

Update: I peeked at Chrome's default stylesheet and tried this:

select:-internal-list-box:focus option:checked {
    color: black !important;
}

But that didn't do the trick. It's greyed out in the dev tools, which means that it's not being applied:

enter image description here

0 Answers
Related