max-height 对原生 select 下拉菜单无效，因其弹出层由系统/浏览器 UI 层绘制、脱离文档流且 CSS 无法穿透；唯一跨浏览器原生方案是使用 size 属性控制显示行数。
原生 select 元素的下拉弹出菜单无法用 max-height 控制高度——这不是写法问题，而是浏览器根本不解析这条样式；你设了也白设，Lighthouse 会直接报“未生效”。
为什么 max-height 对 select 下拉菜单完全无效
下拉菜单（popup）是脱离文档流的系统级组件，由操作系统或浏览器 UI 层直接绘制，CSS 无法穿透。你在 select 上写 max-height: 200px，只会影响顶部可点击区域的视觉高度，弹出来的列表该多高还是多高。
- Chrome / Edge / Safari 均不支持对
option设置max-height、overflow或line-height - Firefox 虽有少量 UA 样式可干预，但行为不稳定，且不跨平台
- 移动端（尤其是 iOS Safari）连
size属性都可能被无视，强制走全屏选择器 -
max-height + overflow-y: auto在select上会被浏览器静默忽略
唯一跨浏览器有效的原生方案：size 属性
size 是 HTML 原生属性，不是 CSS，它告诉浏览器“展开时默认显示几行选项”，浏览器据此渲染带滚动条的弹出菜单。这是目前唯一不用 JS、全平台一致支持的方式。
-
size="5"：展开后最多显示 5 行，超出自动出现垂直滚动条 -
size="1"等效于默认单选下拉（即隐藏列表，点击才展开），但某些旧版 Safari 下可能丢失箭头 -
size和multiple可共存，但加了multiple后视觉变成多选列表，不再是传统下拉样式 - 副作用：
size值越大，DOM 渲染越重，移动端长列表建议不超过 6
要保留“点击展开”交互 + 精确限高？只能自定义下拉
放弃 select，用 div + button + ul 模拟，才能真正控制弹出层高度。关键不是“怎么写”，而是绕开几个硬坑：
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
立即学习“前端免费学习笔记（深入）”；
- 父容器必须设
position: relative，下拉层（ul）用position: absolute; top: 100%定位，否则错位 - 下拉层（
ul）设max-height: 200px; overflow-y: auto——这才是真生效的限高 - 必须监听外部点击、
Escape键、ArrowDown/ArrowUp导航，否则键盘和屏幕阅读器不可用 - 补上
aria-expanded和aria-controls，不然屏幕阅读器无法识别状态 - 移动端要额外处理
touchstart和focus状态同步，iOS Safari 对focus触发极不敏感
别碰这些伪解决方案
它们看似省事，实则埋雷：
-
transform: scale()压缩select高度：弹出菜单依然按原始尺寸展开，且 Chrome 120+ 会报可访问性警告 - 给
option加height或line-height：所有主流浏览器均忽略，iOS Safari 尤其彻底 - 用
appearance: none后以为能自由控制下拉层：它只剥掉顶部箭头，对弹出菜单零影响 - 把
select包进max-height容器里再设overflow: auto：只会截断弹出菜单，而不是限制其高度
真正需要“点击展开 + 固定最大高度 + 自定义滚动条 + 行高可控”的场景，select 的能力边界已经清晰划定了——不是你没写对，而是浏览器根本没留这个接口。这时候，自定义不是过度设计，而是唯一路径；而最容易被忽略的，恰恰是键盘导航和屏幕阅读器支持，它们不是锦上添花，而是可用性的底线。
