option:active {
color: red;
}
option:focus {
color: green;
background: green;
}
option:checked {
color: yellow;
background: yellow;
}<select multiple>
<option>One</option>
<option>Two</option>
<option>Three</option>
</select>I've made numerous attempts to modify the style of this element without success. None of the methods such as active, focus, after, or before seemed to work. Despite the hover effect functioning correctly, I couldn't change the appearance of selected options and active selections at all.
All I'm trying to achieve is altering the color when an option is clicked (currently blue) and when something else is clicked (now gray). How can I adjust these two colors specifically?