将光标更改为 <option> 标签？

Question

将鼠标悬停在 <select> 组合框中的项目上时，有什么方法可以更改光标吗？我假设在 CSS 中执行 option { cursor: pointer; } 会起作用，但它似乎不起作用。

原文由 Hydrothermal 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

制作自己的下拉菜单

<option> 标签由操作系统呈现，而不是浏览器，因此您无法设置它们的样式。

相反，制作您自己的可以完全控制的下拉菜单或使用第 3 方插件，例如 Bootstrap 的 Dropdown 。

MSDN 说得最好：

除了 background-color 和 color 之外，通过选项元素的样式对象应用的样式设置将被忽略。此外，直接应用于单个选项的样式设置会覆盖应用于整个包含选择元素的样式设置。

MDN 也插话了

有些元素根本无法使用 CSS 设置样式。这些包括所有高级用户界面小部件，例如范围、颜色或日期控件以及所有下拉小部件，包括 <select> 、 <option> 、 <optgroup> -6b3 和 <datalist> 元素。众所周知，文件选择器小部件根本无法设置样式。新的 <progress> 和 <meter> 元素也属于这一类。

原文由 SomeKittens 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

可以通过以下方式

select {
    -webkit-appearance:button !important;
        -moz-appearance:button !important;
            appearance:button !important;
    cursor: pointer;
}

已使用最新版本的 Chome、Firefox、Edge 确认

原文由 SirYou 发布，翻译遵循 CC BY-SA 4.0 许可协议