原生 select 的 height 和 max-height 无效，因下拉菜单由系统级组件渲染，CSS 无法控制；唯一原生限高方案是使用 size 属性，如 size="5" 限制显示 5 行选项。
原生 select 的 height 和 max-height 为什么无效
直接给 select 设置 height 或 max-height 只会影响顶部可点击区域的视觉高度，对弹出的下拉菜单完全不起作用。这是因为浏览器把下拉菜单渲染为脱离文档流的系统级组件（由 OS 或浏览器 UI 框架绘制），CSS 无法穿透控制其尺寸、滚动或行高。
常见错误现象包括：设了 max-height: 150px 后弹出菜单依然铺满屏幕；Lighthouse 报告“样式未生效”；移动端（尤其是 iOS Safari）连高度变化都看不到。
-
height在 Chrome/Edge 中常导致顶部区域被压扁，但菜单仍按默认 8–12 行显示 -
line-height对select本身基本无效，对option更是完全忽略 -
appearance: none只能隐藏箭头，不解除对弹出层的样式限制
用 size 属性限制可见选项行数（唯一原生跨浏览器方案）
size 是 HTML 原生属性，它告诉浏览器“展开时显示几行选项”，浏览器据此计算弹出菜单初始高度并自动加滚动条。这是目前唯一无需 JS、所有主流浏览器一致支持的限高方式。
使用场景：表单中需固定展示高度、选项数量可控、可接受多行静态控件形态。
立即学习“前端免费学习笔记（深入）”；
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
-
size="1"等效于默认下拉（即只显示选中项，点击才展开） -
size="5"展开后最多显示 5 行，超出需滚动查看 - 注意：
size会改变渲染模式——select变成类似textarea的多行控件，失去“点击展开”交互 - 移动端（尤其 iOS）可能无视
size，强制走全屏选择器
要保留点击展开 + 限高？只能自定义下拉
若必须维持“点击触发 + 弹出层限高”的交互，原生 select 已无解，必须用 div+button+ul 模拟，并通过 JS 控制显隐与选中状态。
关键实操点：
- 下拉层用
position: absolute定位，配合max-height: 200px+overflow-y: auto实现限高滚动 - 必须添加
aria-expanded和aria-controls保障无障碍 - 监听
document.addEventListener('click')关闭菜单，避免点击空白处不收起 - 键盘支持不可省：需响应
ArrowDown/Enter/Escape - iOS Safari 有最小触摸热区要求（约 44×44px），强行缩小会导致点不中
width 和 max-width 的实际生效范围与陷阱
width 和 max-width 只控制 select 触发区域（即未展开时的框体）宽度，对弹出菜单宽度无效——菜单宽度由最长 option 文本决定，且脱离文档流。
让触发区域真正遵守 max-width 的写法：
- 必须加
box-sizing: border-box，否则padding/border会撑宽 - 推荐组合：
max-width: 200px; width: fit-content; display: inline-block; - 在表格中使用时，
<td> 要设 <code>padding: 0，select设width: 100%; box-sizing: border-box; - 移动端（iOS/Android）基本无视
max-width对弹出菜单的限制，别依赖它做一致性控制
真正可控的菜单宽度方案：换用 Choices.js 等库，其下拉容器是普通 DOM，可直接对 .choices__list--dropdown 设 max-width。
