原生滚动条无法用通用css美化，需分浏览器处理；统一控制外观必须放弃原生控件，改用自定义dom模拟。
原生 <select></select> 的滚动条无法直接用通用 CSS 美化，必须分浏览器处理；想统一控制外观，得放弃原生控件、用自定义 DOM 模拟。
Chrome / Edge / Safari 中隐藏或重绘滚动条
WebKit 内核浏览器支持 ::-webkit-scrollbar 伪元素，但仅对容器生效，而原生 <select></select> 的下拉面板是脱离文档流的 shadow DOM（不可选中、不可样式穿透），所以直接给 <select></select> 加 ::-webkit-scrollbar 完全无效。
可行做法是：把 <select></select> 包在一个固定高度、overflow: auto 的容器里，并用 size 属性强制显示为多行列表（非弹出式）：
<div class="select-container"> <select size="5"><option>北京</option> <option>上海</option> <!-- ... 大量选项 --></select> </div>
然后对容器设置：
.select-container { overflow-y: auto; }.select-container select { width: 100%; }.select-container::-webkit-scrollbar { width: 8px; }.select-container::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 4px; }.select-container::-webkit-scrollbar-thumb { background: #c1c1c1; border-radius: 4px; }
Firefox 下滚动条不可见但可滚动
Firefox 不支持 ::-webkit-scrollbar，且对 <select></select> 下拉面板同样无样式入口。它只提供两个专有属性作用于可滚动容器：
-
scrollbar-width: none—— 彻底隐藏滚动条（但滚轮/键盘仍可滚动） -
scrollbar-color: <thumb><track></track></thumb>—— 仅控制颜色，不支持圆角、宽高、阴影等
所以如果你用了上面的 size + 容器方案，就得补上：
.select-container {
scrollbar-width: none; /* Firefox 隐藏 */
scrollbar-color: transparent transparent;
}
注意：scrollbar-width: none 在 Firefox 中会移除拖拽能力，用户只能靠滚轮或方向键操作，这对长列表很不友好。
真正跨浏览器可控的方案：完全替换原生 select
当设计要求高（比如圆角滚动条、hover 效果、搜索过滤、键盘导航支持），原生 <select></select> 就是死胡同。必须用 <div> + <code><ul></ul> + <li> 模拟，再用 JS 绑定行为：
- 保留原始
<select></select>作为数据源和表单提交后备（display: none） - 用 JS 读取
select.options动态生成<li data-value="xxx">文本</li> - 监听点击、键盘（
ArrowDown/Enter）、blur等事件同步状态 - 滚动容器设为
max-height+overflow-y: auto，此时::-webkit-scrollbar和scrollbar-width才真正起效
这种方案兼容性好、样式自由度高，但需自行处理焦点管理、屏幕阅读器标签（aria-*）、禁用态、键盘导航逻辑等细节——很多坑藏在无障碍支持里，不是加个 tabindex 就完事。
为什么不能只靠 CSS appearance: none？
appearance: none 只能隐藏原生下拉箭头，不影响下拉面板本身。你仍然无法控制它的宽度、背景、滚动条、z-index 或动画。更麻烦的是，某些旧版 Safari 会忽略该声明，而 Edge 在 strict mode 下可能触发渲染异常。它只是“去箭头”，不是“去原生”。真要动下拉面板，就得承认一个事实：浏览器不给你开这个口子。
