I've changed the selected option's background color to pink.
However, when I select the option, it sets the color to white, which I don't like.
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:


