max-height 对原生 select 下拉菜单无效，因其弹出层由系统/浏览器底层绘制、脱离文档流；唯一跨浏览器有效的原生限高方案是使用 size 属性。
select 元素的 max-height 样式完全无效——浏览器压根不解析它对下拉弹出层的限制，你设了也白设。
为什么 max-height 对原生 select 下拉菜单无效
下拉菜单（popup）是操作系统或浏览器底层绘制的独立 UI 层，脱离文档流，CSS 无法穿透控制。Chrome、Edge、Safari 均无视 max-height、overflow-y、line-height 等样式作用于 option 列表；Firefox 虽有少量 UA 样式可干预，但行为不稳定且不跨平台。
你看到的“弹出高度”其实是系统默认渲染的行数（通常 8–12 行），和 select 自身的 CSS 高度无关。
-
max-height: 150px写在select上，只影响顶部可点击区域的视觉高度 - Lighthouse 会直接报“样式未生效”
- iOS Safari 甚至可能完全忽略
size属性，强制走全屏选择器
唯一跨浏览器有效的原生方案：size 属性
size 是 HTML 原生属性，它明确告诉浏览器“展开时显示几行选项”，浏览器据此计算弹出菜单的初始高度并自动加滚动条——这是目前唯一无需 JS、全平台一致支持的限高方式。
示例：
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
<select size="5"><option>Option 1</option> <option>Option 2</option> <!-- ... 多个选项 --></select>
-
size="5"→ 展开后最多显示 5 行，超出需滚动查看 -
size="1"→ 等效于默认下拉（即隐藏列表） - 注意：
size会改变渲染模式：select变成类似textarea的多行控件，失去“点击展开”交互，适合固定展示场景
要保留点击展开 + 限高？必须用 div+ul 自定义
放弃原生 select，用语义化结构模拟，才能真正控制弹出层高度和滚动行为。
- 父容器必须设
position: relative，下拉层（ul）用position: absolute; top: 100%定位，否则错位 - 下拉层设
max-height: 200px; overflow-y: auto——这才是真正生效的限高 - 必须监听外部点击、
Escape键、ArrowDown/Up导航，否则可访问性不达标 - 别漏掉
aria-expanded和aria-controls，否则屏幕阅读器无法识别状态 - 移动端要额外处理
touchstart和focus同步，iOS Safari 对focus触发极不敏感
容易被忽略的兼容性雷区
哪怕你用了 appearance: none + 自定义箭头，仍要注意：
- iOS Safari 对
select的触摸热区有最小尺寸要求（约 44×44px），强行缩小会导致点不中 - Windows 高对比模式下，自定义下拉若没正确设置
color/background/border，可能完全不可见 - Chrome 120+ 对
transform: scale()缩放后的表单元素触发更严格的可访问性警告
真正可控的限高，从来不在 select 上做文章，而在是否接受“点击展开”这个交互前提——选错路径，后面全是补丁。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
