原生select的height和max-height对下拉菜单无效，因其弹出层由系统绘制且脱离文档流；唯一跨浏览器原生限高方案是size属性，如size="5"限制显示5行；需点击展开+精确控高则必须用div+ul自定义并完善无障碍支持。
select 元素本身无法通过 height 或 max-height 固定下拉弹出菜单的高度——浏览器压根不认这些样式对弹层生效。
为什么 height 和 max-height 在 select 上基本无效
原生 select 的渲染被拆成两部分：顶部可点击区域（能被 CSS 影响），和脱离文档流的系统级弹出菜单（由操作系统或浏览器底层绘制）。你设的 height: 40px 只会压扁顶部按钮区，点开后菜单该多高还是多高；max-height 更是完全被忽略，Lighthouse 会直接标记“样式未生效”。Firefox 虽有少量 UA 样式可干预，但行为不稳定，不能跨浏览器复用。
唯一原生可用的限高方案：size 属性
size 是 HTML 原生属性，它告诉浏览器“展开时默认显示几行选项”，浏览器据此计算弹出菜单初始高度，并在超出时自动加滚动条。这是目前唯一全平台一致支持、无需 JS 的方案。
-
size="5"表示最多显示 5 行，多余项需滚动查看 -
size="1"等效于默认下拉（即隐藏列表） - 注意：
size会让select渲染成多行控件，失去“点击展开”交互，适合固定展示场景 - 移动端（尤其 iOS Safari）可能无视
size，强制走全屏选择器
要保留点击展开 + 限高？只能自定义下拉
放弃原生 select，改用 div+button+ul 模拟，才能真正控制弹出层高度和交互逻辑：
- 父容器必须设
position: relative，下拉层用position: absolute+top: 100%定位 - 把
max-height: 200px和overflow-y: auto加到ul上，这才是真正生效的限高 - 必须监听外部点击、
Escape键、ArrowDown/Up导航，否则可访问性不达标 - 别漏掉
aria-expanded和aria-controls，否则屏幕阅读器无法识别状态 - iOS Safari 对
focus极不敏感，需额外处理touchstart同步状态
真正难的不是写代码，而是绕过那些“看似有效实则失效”的样式陷阱——比如给 select 加 transform: scale()，文字和边框是缩了，但弹出菜单依然按原始尺寸展开。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
