如何使用css更改下拉菜单中所选元素的突出显示颜色？

Question

嘿嘿， 我在我的 Laravel 项目中制作了一个标准的下拉菜单，如下所示：

<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>

但是，突出显示所选元素的标准颜色是蓝色。 如何将其更改为灰色？有谁知道，我怎么能用 css 或 JavaScript 做到这一点？ The selected element is highlighted with blue

Answer 1

您可以为此使用option:hover。这是一个使背景颜色变为灰色的示例。

option:hover { 
   background-color : gray;
}