原生 下拉面板无法用 CSS overflow 控制滚动，因其由系统绘制、脱离文档流；唯一纯 CSS 方案是用 size 属性转为常驻多行列表并设置 height 和 overflow-y；如需弹出式交互则必须自定义 DOM 结构。
<select></select> 元素本身无法用 overflow 控制下拉弹出面板的滚动行为——那部分不是 DOM，而是由操作系统或浏览器 UI 层绘制的，CSS 完全失效。
为什么直接给 <select></select> 加 overflow-y: auto 没用
你写的 select { overflow-y: auto; } 或 style="overflow: scroll" 在点击展开时完全不生效。Chrome、Edge、Firefox 都如此；macOS 下尤其不可控。系统菜单高度上限（通常 10–12 行）由 OS 决定，max-height、height、-webkit-appearance: none 都不能突破这个限制。
- 错误现象：
<select></select>点击后弹出的列表仍被截断，没滚动条，或滚动条出现在错误位置（比如整个页面右侧） - 根本原因：下拉菜单是“浮动 UI 层”，不在文档流中，
overflow只作用于块级容器的盒模型内部 - 兼容性影响：Safari 对
appearance的支持最弱，强行重置可能让下拉按钮消失
用 size 属性转为常驻多行列表并加滚动
这是唯一无需 JS 就能稳定控制滚动的原生方案：把下拉“变成列表”，放弃弹出行为，改用固定行数 + 垂直滚动。
- 必须同时设置
size属性（如size="5"）和style="height: 120px; overflow-y: auto;" -
size决定默认显示几行选项；height和overflow-y才真正启用滚动 - 注意：这不再是“点击展开”的下拉，而是一个始终可见的垂直列表，语义上接近
<select multiple></select>，但仍是单选 - 示例：
<select size="5" style="height: 120px; overflow-y: auto;"> <option value="1">选项一</option> <option value="2">选项二</option> <!-- 更多选项... --> </select>
用 <div> + <code><ul></ul> 自定义下拉并完全接管滚动
当必须保留“点击展开”交互，又需要滚动、搜索、长文本省略或统一样式时，原生 <select></select> 已无路可走，只能模拟。
立即学习“前端免费学习笔记（深入）”；
- 核心步骤：隐藏原生
<select></select>（position: absolute; opacity: 0;），用<div role="combobox"> 包裹自定义触发器和 <code><ul></ul>列表 -
<ul></ul>设置max-height: 200px; overflow-y: auto;，此时overflow生效，滚动条可定制 - 长文本截断需作用于
<li>内文字：white-space: nowrap; overflow: hidden; text-overflow: ellipsis; - 必须手动处理键盘导航（
ArrowDown/Enter）、焦点管理、aria-expanded和aria-activedescendant
别踩这些坑
移动端 multiple 几乎无效，iOS Safari 直接忽略该属性；size 在 Android Chrome 中可能渲染异常；text-overflow: ellipsis 对 <option></option> 标签在多数浏览器里压根不生效——它只对块级或内联块元素起作用，而 <option></option> 是替换元素，样式能力极弱。
真正可控的滚动，永远发生在你亲手创建的容器里，而不是寄希望于浏览器替你画的那个黑盒菜单。
