原生 下拉弹出层高度无法用 css 控制，因其由操作系统或浏览器 ui 框架绘制，不在 dom 中；有效方案是父容器限制可见区域高度或 js 自定义下拉并添加 aria 属性。
原生 <select></select> 的下拉弹出层高度无法用 CSS 可靠控制——这不是你写错了，是浏览器故意不让你动。
为什么 max-height 和 overflow-y 对下拉弹出层无效
点击 <select></select> 后弹出的菜单，不是 DOM 中的普通元素，而是由操作系统或浏览器 UI 框架绘制的原生控件。你在开发者工具里看到的 <select></select> 只是个“触发器”，真正的选项面板不在 HTML 树里，CSS 无法穿透。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
-
max-height: 200px、overflow-y: auto加在<select></select>上，基本没效果（Chrome/Edge 完全忽略，Firefox 极少数版本有弱响应） -
height或line-height只影响顶部可点击区域，不影响弹出菜单的行高和显示行数 - 即使用了
appearance: none，也只是隐藏箭头，不解除对弹出层的样式封锁 - iOS Safari、Windows 高对比模式等场景下，强行缩放或隐藏还会引发可访问性问题
真正能起作用的两种做法
别跟原生下拉死磕。要么轻量增强，要么彻底替换。
-
轻量方案：用父容器限制可见区域高度
把
<select></select>包进一个<div class="select-wrapper">，对这个 <code>div设置max-height和overflow-y: auto。这不能控制弹出层本身，但能防止它撑开布局、遮挡下方按钮（比如“确认”按钮被盖住） -
可控方案：JS 自定义下拉（推荐）
隐藏原生
<select></select>（opacity: 0; position: absolute），用<div> + <code><ul></ul>模拟下拉区。此时max-height、overflow-y、line-height全部生效，还能加搜索、键盘导航、焦点管理 - 自定义时必须加
aria-expanded和aria-controls，否则屏幕阅读器会“看不见”这个下拉
<select size></select> 是个陷阱，慎用
<select size="5"></select> 会让 <select></select> 显示成多行列表（非下拉式），看起来像有滚动，但它：
- 不是真正的下拉行为，用户无法点击展开/收起
- 在移动端常被系统强制转为全屏选择器，体验割裂
- 无法与表单验证逻辑自然对齐（比如 :invalid 伪类可能不触发）
- size 值只是“建议行数”，浏览器仍可能按内容自动调整高度
真正需要稳定控制高度、滚动、文本截断、键盘操作的地方，<select></select> 就不该是第一选择。自定义下拉不是过度设计，是面对现实的必要妥协。
