原生 的下拉菜单高度无法用 css 的 height 或 max-height 控制，因其弹出层是脱离文档流的系统级组件；唯一跨浏览器有效的方案是使用 html size 属性指定可见选项行数。
直接用 CSS 选择器设置 <select></select> 的高度，无法控制下拉弹出菜单（popup）的实际展开高度——它只可能影响顶部选中区的视觉尺寸，对真正用户看到的“下拉列表”毫无作用。
为什么 height 和 max-height 对下拉菜单无效
原生 <select></select> 的弹出层是脱离文档流的系统级组件（由操作系统或浏览器 UI 框架绘制），CSS 选择器根本选不到它。你写的 select { height: 40px; } 或 select { max-height: 200px; }，浏览器会忽略后半段逻辑，仅在顶部区域做有限渲染。DevTools 里能看到样式被划掉，不是优先级问题，而是 UA 直接不支持解析。
- Chrome/Edge 中：弹出菜单固定显示约 8–10 行，每行高度由系统决定，
line-height、padding、font-size对<option></option>全部无效 - iOS Safari：强制走全屏选择器，任何 CSS 高度干预均失效，且触摸热区低于 44×44px 时点不中
- Firefox 老版本曾允许部分
height生效，但已废弃，2026 年主流版本行为与其他浏览器一致
size 属性才是唯一跨浏览器生效的“高度控制”方式
size 是 HTML 原生属性，不是 CSS，但它能稳定控制可见选项行数，从而间接决定下拉区域的视觉高度。这是目前唯一不依赖 JS、无障碍友好、全平台兼容的方案。
-
<select size="4"></select>→ 展开后固定显示 4 行，超出自动滚动，高度 ≈ 4 × 浏览器默认行高（通常 24–28px） -
size="1"等效于默认单选下拉，但某些旧版 Safari 可能丢失箭头，慎用 -
size和multiple可共存，但加了multiple后视觉变为多选列表，不再是传统下拉样式 - 移动端长列表建议
size≤ 6，避免渲染卡顿；iOS 上仍可能降级为全屏选择器
想保留点击展开 + 精确控高？必须放弃原生 <select></select>
当你需要 max-height: 200px + overflow-y: auto + 自定义行高 + hover 效果 + 键盘导航时，<select></select> 已经不是工具，而是障碍。此时应改用语义化自定义结构：
- 隐藏原生
<select></select>（position: absolute; opacity: 0; pointer-events: none;），保留其表单语义和可访问性 - 用
<div class="custom-select"> <button></button><ul aria-hidden="true"></ul> </div>模拟交互 -
<ul></ul>上设max-height: 200px; overflow-y: auto;—— 这才是真生效的限高 - 每个
<li>可自由设padding、line-height、min-height，完全可控 - 必须监听
Escape、ArrowDown/Up、外部点击，并同步更新aria-expanded和焦点状态
真正麻烦的从来不是“怎么写 CSS”，而是接受一个事实：你不能用 CSS 选中并样式化一个根本不在当前文档流里的东西。要么用 size 接受交互妥协，要么用 JS+CSS 重写，把所有控制权拿回来——没有中间路线。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
