如何在悬停时使用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都可以通过关键字返回给您＆＃34; jQuery select box＆＃34; ：）

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 }