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

Question

Hej，我在我的 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 做到这一点？ 所选元素以蓝色突出显示

Answer 1

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

option:hover { 
   background-color : gray;
}