'Change <select> <option> highlight color

I have this:

<select name="idx" id="search-field_0">
    <option value="kw">Keyword</option>
    <option value="su,wrdl">Subject</option>                                        
    <option value="ti">Title</option>        
    <option value="au,wrdl">Author</option>                                                                    
    <option value="pb,wrdl">Publisher</option>
    <option value="pl,wrdl">Publisher location</option>
    <option value="nb">ISBN</option>                                        
    <option value="bc">Barcode</option>
</select>

enter image description here

I want to change its highlight background to green. How will I do this , without converting my tag to any form.Any idea?



Solution 1:[1]

I'm not sure you can really change this with pure css. this is browser / operating system defined colors. You can do something a little hackier and make a custom dropdown using divs. or maybe you can find some javascript library to handle this..

Solution 2:[2]

I doubt there is something for the option highlight you're specifically asking for.

Turns out there are multiple questions like this all over SO, although here is a good explanation by this one:

Well you cannot change the hover color of select option as it is rendered by Operating System instead of HTML

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 hamobi
Solution 2 Community