如何修改select元素下拉展开部分的cursor光标样式

原因说明 #

原生<select>的下拉选项弹窗是浏览器/操作系统直接渲染的原生UI组件，普通CSS规则无法作用到这部分区域，你遇到的展开后光标变回默认箭头是浏览器的默认行为，目前没有全浏览器兼容的纯CSS方案可以直接修改原生下拉面板的光标样式。

可行实现方案 #

方案1：自定义模拟下拉组件（全浏览器兼容）

如果要100%实现所有区域都保持指针光标，最稳妥的方式是放弃原生<select>，用HTML+CSS+JS模拟下拉框的功能：

• 用普通<div>模拟选择框的收起状态，绑定点击事件控制下拉面板的显隐
• 用<ul>+<li>结构渲染下拉选项，给<li>统一设置cursor: pointer样式
• 补充选项点击赋值、失焦收起、键盘方向键选择等原生交互逻辑即可

方案2：Chromium内核浏览器兼容写法

如果你只需要兼容Chrome、Edge等Chromium内核浏览器，可以尝试给<option>也设置光标样式，部分版本的Chromium浏览器会生效：

<select style="width: 125px; cursor: pointer;">
  <option style="cursor: pointer;">AAAA</option>
  <option style="cursor: pointer;">BBBB</option>
  <option style="cursor: pointer;">CCCC</option>
</select>

注意该写法对Firefox、Safari无效。

内容的提问来源于stack exchange，提问作者Blake McBride