原生下拉弹出层高度由浏览器控制，css的height、max-height等无效；唯一影响可见选项数的原生属性是size，但会改变交互形态；真正可控需用js自定义组件或轻量库。
下拉列表 <select></select> 高度不可控是浏览器原生行为
HTML 原生 <select></select> 元素的下拉展开区域（popup）高度完全由浏览器控制，height、max-height、overflow 等 CSS 对它无效。你调 height: 200px 只会改下拉框本身（即未展开时的输入框高度），不会影响弹出菜单的高度或可见选项数。
想控制可见选项数量？只能靠 size 属性
size 是 <select></select> 唯一能影响“展开后显示几行”的原生属性，但它会让下拉变成多行列表（类似 <textarea></textarea>），失去传统下拉交互体验：
- 设置
size="5"→ 展开后固定显示 5 行选项，无滚动条（超出部分不可见） - 设置
size="1"→ 恢复默认单行下拉（但依然无法控制弹出层高度） - 该属性对移动端 Safari / Chrome 影响有限，部分安卓 WebView 会忽略
size
真正可控的方案：用 JavaScript + 自定义下拉组件
如果必须限制弹出层最大高度、支持滚动、保持点击收起等行为，就得放弃原生 <select></select>，改用 div + ul + JS 模拟。关键点包括：
- 用
position: absolute+max-height: 200px+overflow-y: auto控制菜单高度 - 监听
click或focus显示菜单，blur或外部点击收起（注意event.stopPropagation()防止误收） - 用
aria-expanded、aria-haspopup和键盘导航（ArrowDown/Enter）保障可访问性 - 不要手写——优先选轻量库如 Choices.js 或 Tom Select，它们已处理好 Safari 的 focus trap、iOS 键盘遮挡等坑
绕不开的兼容性现实
即使用了自定义下拉，某些场景仍受限：
- iOS Safari 中，
position: fixed菜单在页面滚动时可能错位，得切回position: absolute并监听scroll - 表单提交时，自定义组件必须同步更新隐藏的
<input type="hidden">或手动设置formdata.append() - 如果只是想让下拉“看起来高一点”，改
padding或line-height在未展开状态下有效，但别指望它影响弹出层
原生 <select></select> 的弹出层属于操作系统级 UI（尤其在 macOS/iOS），网页 CSS 无法穿透。真要精细控制，就得接受“重写交互”的成本——这不是样式问题，是平台边界问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
