max-height 对原生 select 无效，因其弹出菜单是脱离文档流的系统级组件；唯一原生有效方案是使用 size 属性控制可见行数，否则需用 div+ul 自定义下拉。
max-height 对原生 select 元素完全无效——它只作用于顶部可点击区域，弹出菜单是脱离文档流的系统级组件，CSS 无法穿透控制。
为什么 max-height 在 select 上不生效
浏览器将 select 拆成两个独立渲染层：顶部“选中区”（可被部分 CSS 影响）和底层弹出菜单（由操作系统或 UA 样式绘制）。你设 max-height: 150px，Lighthouse 会直接标记为“样式未生效”，Chrome/Edge/Safari 均忽略该声明。Firefox 虽有极少数 UA 样式可微调，但行为不可靠且不跨平台。
常见错误现象包括：
- 弹出菜单高度不变，但顶部区域被压扁，文字偏位甚至截断
- 给
option加padding、height或line-height，全部被忽略 - 移动端（尤其是 iOS Safari）强制启用全屏选择器，
max-height彻底失效
唯一原生有效方案：size 属性控制可见行数
size 是 HTML 原生属性，不是 CSS，它让 select 以常驻列表形式显示指定行数，此时浏览器会据此计算弹出菜单初始高度并自动添加滚动条。这是目前唯一无需 JS、全平台一致支持的方式。
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
立即学习“前端免费学习笔记（深入）”；
-
size="5"→ 展开后最多显示 5 行选项，超出可滚动；size="1"等效于默认下拉行为 - 必须搭配
multiple才能多选，否则仍按单值提交 - 缺点：失去“点击展开”交互，变成类似
textarea的多行控件；移动端可能误触或热区过小 - 注意：iOS Safari 可能无视
size，强制走全屏，需额外检测并降级
要保留点击展开 + 精确限高？只能用 div+ul 自定义
放弃原生 select，用语义化结构模拟，才能真正控制弹出层高度。关键不是“怎么写”，而是绕过几个硬性限制：
- 父容器必须设
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 触发极不敏感
容易被忽略的细节：所谓“最大高度”，其实包含两个互不相干的维度
选中区高度（前端可控，靠 padding 或 transform: scale() 微调）和弹出菜单高度（系统级不可控，只能靠 size 间接影响或彻底自定义）。强行用同一套 CSS 同时约束两者，只会触发兼容性雷区、可访问性警告或移动端点不中。真要统一控制，就得接受自定义组件带来的开发成本——这不是过度设计，而是浏览器能力边界决定的。
