如何将 html 中下拉菜单的默认突出显示颜色从蓝色更改为 <select><option> 标签的其他颜色答案

【问题标题】：How to change the default highlight color of drop down in html from blue to some other color for <select><option> tag如何将 html 中下拉菜单的默认突出显示颜色从蓝色更改为 <select><option> 标签的其他颜色
【发布时间】：2013-10-17 20:33:15
【问题描述】：

如何使用某些 CSS 属性或 Javascript 将 HTML 中下拉菜单的默认突出显示颜色从蓝色更改为 <select><option> 标记的其他颜色？

要求是我只能使用<select> <option> 标签。我尝试了下面的代码，但它对我不起作用：

<html>
    <head>
        <title>Dropdown Colour</title>
        <style type="text/css">
            option:hover {
                background:#C6C4BD;
            }
        </style>    
    </head>

    <body>

        <select>
            <option>Shell</option>
            <option>Cabbage</option>
            <option>Beans</option>
            <option>Cheese</option>
            <option>Clock</option>
            <option>Monkey</option>
        </select>

    </body>
</html>

【问题讨论】：

Change Select List Option background colour on hover in html的可能重复
Change Select List Option background colour on hover的可能重复

标签： javascript jquery html asp.net css

【解决方案1】：

尝试设置 select 的轮廓和/或边框属性。

select{outline:1px solid green;border:1px solid black;}

【讨论】：

【解决方案2】：

目前我不知道这可以仅使用 CSS 来完成。

但是，使用 jQuery 我能够实现类似的效果。

Live Demo

您的下拉菜单发生了变化，因为我必须设置选择元素的大小，使其看起来像一个列表框。也许有人可以即兴发挥。

这是我使用的 jQuery

$(document).ready(function (event) {   
    $('select').on('mouseenter', 'option', function (e) {
        this.style.background = "limegreen";
    });
    $('select').on('mouseleave', 'option', function (e) {
        this.style.background = "none";
    });
});

【讨论】：

【解决方案3】：

试着改成这样，希望对你有帮助

     select option{
        background: red;
        color: #fff;
        outline:1px solid green;
       }

【讨论】：