原生 select 无法通过 max-height 控制下拉菜单高度，因其弹出层是脱离文档流的系统级组件；唯一跨浏览器有效的原生方案是使用 size 属性，如 size="5" 限制显示行数；若需点击展开且限高，则必须用 div+ul 自定义下拉。
select 元素本身无法通过 max-height 控制下拉弹出菜单的高度——浏览器根本不认这个属性。你设了 max-height: 150px 在 select 上，只会影响顶部可点击区域的视觉高度，弹出来的菜单该多高还是多高。
为什么 max-height 对原生 select 下拉菜单无效
下拉菜单（popup）是脱离文档流的系统级 UI 组件，由操作系统或浏览器底层绘制，CSS 无法穿透控制。Chrome / Edge / Safari 均不支持对 option 列表设置 max-height、overflow 或 line-height；Firefox 虽有部分 UA 样式可干预，但行为不稳定且不跨平台。
- 你看到的“下拉高度”其实是操作系统默认渲染的行数（通常 8–12 行），与
select的 CSS 高度无关 -
max-height+overflow-y: auto在select上完全被忽略，Lighthouse 会直接报“样式未生效” - 移动端（尤其是 iOS Safari）连
size属性都可能被无视，强制走全屏选择器
真正能限制可见选项数量的方案：用 size 属性
size 是 HTML 原生属性，它告诉浏览器“默认展开显示几行选项”，浏览器会据此计算弹出菜单的初始高度，并在超出时自动加滚动条。这是唯一被所有主流浏览器一致支持的、无需 JS 的高度控制方式。
- 写法：
<select size="5"><option>A</option> <option>B</option></select> - 效果：展开后最多显示 5 行，多余项需滚动查看；
size="1"等效于默认下拉（即隐藏列表） - 注意：
size会改变元素渲染模式——它会让select变成类似textarea的多行控件，失去“点击展开”交互，适合固定展示场景 - 若仍需“点击展开 + 限高”，
size就不适用，必须换方案
要保留点击展开交互，又得限制高度？只能自定义
放弃 select，用 div + button + ul 模拟，才能完全控制弹出层高度。关键不是“怎么写”，而是“绕过哪些坑”：
- 父容器必须设
position: relative，下拉层用position: absolute+top: 100%定位，否则错位 - 下拉层（
ul）设max-height: 200px+overflow-y: auto，这才是真正生效的限高 - 必须监听
click外部关闭、Escape键关闭、ArrowDown/Up键导航，否则可访问性不达标 - 别忘了
aria-expanded和aria-controls，否则屏幕阅读器无法识别状态 - 移动端要额外处理
touchstart和 focus 状态同步，iOS Safari 对focus触发极不敏感
最常被忽略的一点：即使你用 transform: scale() 压缩原生 select 高度，弹出菜单依然按原始尺寸展开——缩放不作用于 popup 层。所谓“看起来矮了”，只是骗过了眼睛，用户点击后还是会面对一个巨大且不可控的列表。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
