max-height 对原生 <select> 无效，因其弹出菜单为系统级组件，CSS 无法穿透；唯一跨浏览器原生限高方案是使用 size 属性，自定义下拉则需用 div 模拟并手动实现交互与无障碍。
max-height 对原生 <select> 完全无效——它只作用于顶部可点击区域，弹出菜单是系统级组件，CSS 无法穿透。
为什么 max-height 在 <select> 上不生效
浏览器把 <select> 拆成两部分：上面的“选中区”（CSS 可有限干预）和下面脱离文档流的弹出菜单（由操作系统或 UA 样式绘制）。你设 max-height: 200px，Lighthouse 会直接报“样式未生效”，Chrome / Edge / Safari 全部忽略；Firefox 虽有极少数 UA 样式可微调，但行为不稳定、不跨平台。
常见错误现象包括：
- 弹出菜单高度始终固定在 8–12 行，默认行高约 24px，与你写的
max-height无关 - 给
<option>加height、line-height或padding，所有主流浏览器均无视 - 移动端（尤其 iOS Safari）连
size都可能被绕过，强制走全屏选择器
唯一跨浏览器有效的原生方案：size 属性
size 是 HTML 原生属性，不是 CSS，它告诉浏览器“展开时默认显示几行选项”，浏览器据此渲染带滚动条的列表。这是目前唯一无需 JS、全平台一致支持的限高方式。
立即学习“前端免费学习笔记（深入）”；
-
size="5"：展开后最多显示 5 行，超出自动出现垂直滚动条 -
size="1"等效于默认下拉行为（即隐藏列表，点击才展开），但某些旧版 Safari 下可能丢失箭头 - 注意：
size会让<select>渲染为多行控件，失去“点击展开”交互，适合筛选栏等固定展示场景 - 移动端慎用大
size值（如 >6），长列表易卡顿，且 iOS 可能强制降级
要保留点击展开 + 精确控高？必须自定义下拉
放弃原生 <select>，用 <div> + <button> + <ul> 模拟，才能真正控制弹出层高度。
- 父容器必须设
position: relative，下拉层（<ul>）用position: absolute; top: 100%定位，否则错位 - 下拉层设
max-height: 200px; overflow-y: auto——这才是真正生效的限高 - 必须监听外部点击、
Escape键、ArrowDown/ArrowUp导航、Enter确认，否则键盘和屏幕阅读器不可用 - 补上
aria-expanded和aria-controls，否则无障碍支持归零；原生<select>应保留在 DOM 中（opacity: 0; pointer-events: none），同步更新value和selectedIndex
别踩这些坑：缩放、对齐与移动端
用 transform: scale(1, 0.75) 微调视觉高度看似取巧，但风险明确：
- 必须配
transform-origin: top center和margin-top补偿偏移，否则布局错位 - 缩放后文字变小，需同步调大
font-size（如原 14px → 改为 16px）来视觉对齐 - Chrome 120+ 会报 “form elements not scalable” 可访问性警告
- iOS Safari 强制最小触摸热区为 44×44px，硬缩到 28px 就点不中
真正需要“点击展开 + 固定最大高度 + 自定义行高 + hover/键盘支持”的场景，自定义不是过度设计，而是浏览器能力边界决定的——你不是没写对，是原生 <select> 根本不提供这个接口。
