如何在悬停时使用 CSS 更改选择选项的颜色？

Question

<select style="width:245px;">
    <option value="rseleccionar">Seleccione..</option>
    <option value="bs">Bienes Separados</option>
    <option value="bm">Bienes Mancomunados</option>
</select>

我想将默认的蓝色更改为另一个。

Answer 1

select 和 option 标签的样式非常有限。

这是因为它们的显示方式可能会根据浏览器/操作系统而改变。想想当您单击手机上的选择标签时会发生什么。您没有在桌面浏览器上获得预期的下拉列表。所以你不能设置通用的样式，因为它不会原生在任何地方显示保存。

可能的样式有：主要在select 标记上，但在option 上非常有限。例如，您可以禁用选择框的原生样式：

select {
    appearance: none;
    /* may need vendors prefixes. */
}

其他解决方案是： 使用其他 HTML 标签模拟选择框的 jQuery 插件：

• https://jqueryui.com/selectmenu/
• https://github.com/marcj/jquery-selectBox
• Google 可能会向您返回关键字“jQuery 选择框”:)

Answer 2

选项元素由操作系统呈现，而不是 HTML。您无法更改这些元素的样式。

Answer 3

试试这个，希望它会工作

<select class="hover_color" style="width:245px;">
   <option value="rseleccionar">Seleccione..</option>
   <option value="bs">Bienes Separados</option>
   <option value="bm">Bienes Mancomunados</option>
</select>

.hover_color:hover { background-color: red; border:1px solid red }