Can't Change HTML dropdown select option background on hover on Chrome

Question

I am trying to change the background color for HTML select option tag when hover over it. But unfortunately, cant do that on Chrome Browser. Though it works on Microsoft Edge

Chrome Version: Version 83.0.4103.97 (Official Build) (64-bit)

HTML Code Snippet

<select class="gender-dropdown">
    <option value="0" selected>Select Gender</option>
    <option value="1">Male</option>
    <option value="2">Female</option>
    <option value="3">Transgender</option>
    <option value="4">Other</option>
</select>

CSS Code Snippet

select:focus option:hover {
    background-color: yellow;
}

Weirdly, when i use <select class="gender-dropdown" onfocus="this.size=5"> this works with same CSS, but i want to use it without onfocus function. I have found similar problems with solutions but none of them worked for me. May be because most of them are quite old.

Am I missing something here? Any Help/Guidance is appreciable.

Thanks in advance.

Working Code Snippet https://www.codeply.com/p/HShzArOdic

Answer 1

When it comes to styling the select option, there are limited options.

See this answer

If you want full control over styling the options you would need to do your own custom implementation, or use one from a library.

Answer 2

This issue is because of the recent Chrome update. See this link to fix the issue.

Select options black border after chrome upgrade

Answer 3

That black border is a new feature for form controls in Chrome version 83.

You can disable this in your Chrome, accessing chrome://flags/#form-controls-refresh and disabling the Web Platform Controls updated UI flag.