HTML <select> 元素无法通过 CSS 的 overflow 属性控制下拉列表滚动，因其弹出菜单由系统/浏览器 UI 层独立绘制、脱离 DOM；可靠方案仅有两个：一是用 size 属性转为多行常驻列表并配合 height 和 overflow-y: auto，二是用 JavaScript 构建完全自定义下拉组件以实现滚动、搜索及可访问性支持。
HTML <select> 本身不支持 overflow 属性
直接给 <select> 元素设置 overflow: auto 或 overflow-y: scroll 完全无效——浏览器原生下拉框的弹出列表（<option> 渲染区域）是脱离 DOM 流、由操作系统或浏览器 UI 层独立绘制的，CSS 无法控制其内部滚动行为。
真正能控制“选项溢出”的只有两个可靠路径
要么改用自定义下拉组件（完全接管 DOM），要么借助浏览器默认行为做有限约束：
-
限制可见选项数：用
size属性让<select>始终以多行列表形式展开，此时可配合height+overflow-y: auto控制容器滚动 —— 但这不是“点击展开下拉”，而是常驻列表 -
用 JavaScript 模拟下拉：隐藏原生
<select>，用<div>+<ul>+<li>重绘选项区，此时可自由设置max-height和overflow-y: auto -
部分浏览器支持
multiple+size组合实现带滚动的多选列表，但 UX 和语义与单选下拉差异很大，不推荐混用
<select size="5" style="height: 120px; overflow-y: auto;"> <option>选项一</option> <option>选项二</option> <option>选项三</option> <option>选项四</option> <option>选项五</option> <option>选项六</option> </select>
Chrome / Edge 中 <select> 下拉高度受系统限制，无法强制
即使通过 -webkit-appearance: none 重置样式，点击后弹出的下拉面板高度仍由系统菜单策略决定（例如 Windows 上通常最多显示 10–12 项，超出则自动加滚动条；macOS 表现更不可控）。你无法用 CSS 的 max-height 或 overflow 影响它。
- 开发者工具里看到的
<select>元素只是触发器，真正的下拉列表不在 HTML DOM 树中 - 试图用
transform或position: absolute干预弹出位置，大概率失败或引发兼容性问题 - 某些旧版 IE 曾允许
select { height }影响下拉高度，但现代标准已废弃该行为
真要滚动+美观，只能上 JS 自定义下拉
这是唯一能稳定控制选项区高度、滚动、搜索、键盘导航、焦点管理的方式。核心逻辑是：
立即学习“前端免费学习笔记（深入）”；
- 隐藏原生
<select>（opacity: 0+position: absolute） - 用
<div class="custom-select">模拟按钮，点击时显示<ul class="dropdown-list"> - 为
.dropdown-list设置max-height: 200px+overflow-y: auto - 用 JS 同步选中状态到原生
<select>，保证表单提交和可访问性
注意：绕过原生控件意味着你要自己处理 aria-expanded、aria-activedescendant、键盘 ArrowDown/Enter 等可访问性细节，否则对屏幕阅读器用户不友好。
