max-height对原生select下拉菜单完全无效，因其弹出层是脱离文档流的系统级组件，CSS无法穿透；唯一跨浏览器有效的原生方案是使用size属性（如size="5"）限制显示行数。
原生 select 用 max-height 无效，别白费劲
直接说结论：max-height 加在 select 元素上完全不生效——浏览器压根不解析它对下拉弹出层的控制。你看到的“下拉高度”其实是操作系统默认渲染的行数（通常 8–12 行），和 CSS 的 max-height 毫无关系。Lighthouse 会明确报出“样式未生效”，Chrome / Edge / Safari 全部无视；Firefox 虽有极少数 UA 样式可干预，但行为不稳定、不跨平台。
size 属性是唯一原生可靠方案，但会改变交互形态
size 是 HTML 原生属性，不是 CSS，它告诉浏览器“展开时显示几行选项”，浏览器据此计算弹出菜单初始高度并自动加滚动条。这是目前唯一被所有主流浏览器一致支持、无需 JS、纯 HTML/CSS 就能限高的方式。
-
size="5"：展开后最多显示 5 行，超出需滚动查看 -
size="1"：等效于默认下拉（即隐藏列表，点击才展开） - 注意：
size会让select渲染成多行控件，失去“点击展开”交互，变成类似textarea的固定展开态，适合表单预览或后台管理等固定展示场景 - 移动端（尤其 iOS Safari）可能忽略
size，强制走全屏选择器，无法保证一致性
要保留“点击展开 + 限高”，必须放弃 select 自定义
如果你需要的是用户点一下才弹出、弹出后又严格限制高度（比如最多 200px）、还能滚动浏览的体验，那原生 select 已经到头了。唯一可行路径是用 div + button + ul 模拟：
- 父容器设
position: relative，下拉层用position: absolute; top: 100%定位，否则容易错位 -
ul上设max-height: 200px; overflow-y: auto——这才是真正起作用的限高 - 必须监听外部点击、
Escape键、ArrowDown/Up导航，否则键盘用户和屏幕阅读器不可用 - 补全
aria-expanded和aria-controls，不然无障碍支持直接归零 - 移动端要额外处理
touchstart和focus同步，iOS Safari 对 focus 触发极不敏感
别碰 transform: scale() 或 height 强压 select
有人试过 transform: scale(1, 0.8) 缩放 select 来“压矮”它，结果是：选中区被压缩了，但点击后弹出的菜单依然按原始尺寸展开——缩放不作用于弹出层。同理，硬设 height: 36px 只会影响顶部按钮区高度，下拉菜单该多高还是多高，且各浏览器解析 padding 和箭头留白差异极大，Chrome/Firefox/Safari 表现全都不一样。
真正难的不是“怎么写”，而是意识到：原生 select 的弹出层是系统级组件，CSS 进不去。要么接受 size 的交互妥协，要么彻底换掉它——没有中间路线。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
