How to change the highlight colour of the selected element in a drop down menu suing css?

Question

Hej, I made a standard drop down menu in my Laravel project, like this:

<select class="product_select" name="products" id="products">
                <option value="pilsner">Pilsner</option>
                <option value="wheat">Wheat</option>
                <option value="ipa">IPA</option>
                <option value="stout">Stout</option>
                <option value="ale">Ale</option>
                <option value="alcohol-free">Alcohol Free</option>
            </select>

However, the standard colour for highlighting the selected element is blue. How can I change it to gray? Does anyone know, how can I do it with css or with JavaScript? The selected element is highlighted with blue

Answer 1

You can use option:hover for that. Here is an example that makes the background-color gray.

option:hover { 
   background-color : gray;
}