原生 默认不响应 cursor css，因浏览器控件渲染机制限制；需用 appearance: none 隐藏原生样式并自定义箭头，才能使 cursor 生效，禁用态需显式设置 cursor: not-allowed !important。
HTML 下拉框 <select></select> 默认不响应 cursor CSS 设置
直接给 <select></select> 元素加 cursor: pointer 在多数浏览器（尤其是 Chrome、Edge）下无效——因为原生下拉框的“可点击区域”由浏览器控件渲染，CSS cursor 无法穿透到其内部触发区。这不是写法错误，而是渲染机制限制。
- 仅对
<select></select>自身设置cursor，只影响边框/空白处，不影响下拉箭头或选项区域 - Firefox 相对宽松，部分版本能响应；Chrome/Edge/Safari 基本忽略
- 移动端（iOS Safari、Android Chrome）更不可靠，触摸反馈完全由系统控件接管
用 appearance: none + 自定义背景箭头强制接管光标
核心思路是隐藏原生下拉箭头，用伪元素或背景图模拟，并确保整个元素有明确的交互态。此时 cursor 才真正生效。
select {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M2 5l4 4 4-4z'/%3E%3C/svg%3E") no-repeat right 8px center / 12px;
padding-right: 32px;
cursor: pointer;
}
-
appearance: none是关键，它让浏览器放弃原生样式控制权 - 必须同时加
-webkit-appearance和-moz-appearance保证兼容性 - 用 base64 SVG 作背景箭头，避免额外请求，且可自由配色
-
padding-right要足够容纳箭头，否则文字被遮挡
禁用状态下的光标也要显式处理
当 select[disabled] 时，即使设置了 cursor: not-allowed，某些浏览器仍可能沿用系统禁用样式，覆盖你的声明。
select:disabled {
cursor: not-allowed !important;
opacity: 0.6;
}
- 加
!important是为了压制浏览器 UA 样式表中的默认cursor -
opacity配合光标，能让禁用态更直观，但注意不要影响可访问性（屏幕阅读器仍需正常读取） - 若用 JS 动态设
disabled，确保样式规则已加载，否则可能闪现默认光标
真正需要“手型光标”的场景，往往该换组件
如果业务要求精确控制下拉交互（比如 hover 展开、键盘导航高亮、异步搜索），原生 <select></select> 的能力边界很快会暴露：无法监听鼠标移入选项、不能自定义滚动条、不支持虚拟滚动、无障碍属性难补全。
立即学习“前端免费学习笔记（深入）”；
- React/Vue 项目优先用
react-select或@headlessui/react等封装好的库 - 纯 HTML/CSS 场景，可用
<div role="combobox"> + <code><input>+<ul role="listbox"></ul>手动实现，光标完全可控 - 别为“看起来像手型”硬改原生 select；先确认是否真需要原生语义——表单提交、SEO、基础可访问性？还是只是视觉反馈？
