<select> 直接设 height 失效因下拉菜单由系统/浏览器 UI 层绘制，CSS 无法控制其行高与项数；推荐用 size 属性控制可见行数，或 transform: scale() 微调视觉高度，高定制需求则需 JS + CSS 自定义实现。
给 <select> 直接设 height 为什么经常失效
因为浏览器把 <select> 当作一个“黑盒控件”：顶部可点击区域（选中区）能被 height 影响，但下拉弹出菜单（popup）由操作系统或浏览器 UI 层绘制，CSS 完全无法控制它的行高、项数、滚动条出现逻辑。你在 Chrome 或 Edge 里写 height: 32px，可能只压扁了按钮区，点开后还是默认显示 8–10 行、每行 24px 高——这和你写的 height 毫无关系。
用 size 属性控制可见行数（原生最稳方案）
size 是 <select> 原生属性，它让下拉框以“列表模式”展开并固定显示指定行数，此时高度由行数 × 浏览器默认行高决定，且滚动行为稳定、聚焦正常。这是唯一不依赖 JS、不破坏表单语义、兼容性极佳的方案。
- 写法：
<select size="4">→ 展开时显示 4 行选项，超出自动滚动 - 注意：
size和multiple可共存，但加了multiple后视觉就是多选列表，不再是传统下拉箭头样式 - 别混用：
size="1"等效于默认单选下拉，但某些旧版 Safari 下可能失去箭头，慎用 - 副作用：
size值越大，DOM 渲染越重，移动端长列表建议不超过 6
用 transform: scale() 微调视觉高度（轻量折中）
如果你必须保留单选下拉样式、又想让整体看起来更紧凑或更高，transform: scale(y) 是比硬改 height 更可控的方式——它缩放整个元素（含文字和边框），不会触发 popup 渲染逻辑错乱。
- 示例：
select { transform: scale(1, 0.75); transform-origin: top center; margin-top: 4px; } - 必须补
margin-top：缩放会把元素向上偏移，不补偿会导致布局错位 - 同步调
font-size：缩放后文字可能过小，比如原font-size: 14px，缩放 0.75 倍后建议设为16px来视觉对齐 - 风险：缩放会影响父容器的
line-height计算，若父级是 flex 布局，需额外设align-items: center防止垂直错位
彻底自定义下拉（需要 JS + CSS，但 100% 可控）
当设计要求明确包含「固定最大高度 + 自定义滚动条 + 行高/内边距自由设置」时，绕过原生 <select> 是唯一可靠路径。核心思路是隐藏原生元素，用 <div> + <button> + <ul> 模拟交互，并用 JS 同步值。
立即学习“前端免费学习笔记（深入）”；
- 关键 CSS：
.dropdown-menu { max-height: 200px; overflow-y: auto; }+li { line-height: 28px; padding: 4px 12px; } - 必须监听
click和键盘事件（ArrowDown/Enter）才能满足无障碍要求 - 别忘了同步
disabled状态：原生<select disabled>会禁用整个交互，自定义方案里得手动加aria-disabled="true"并阻止事件 - 兼容性提示：iOS Safari 对
position: absolute的下拉定位常有偏移，建议用getBoundingClientRect()动态计算位置
真正难的不是实现，而是边界情况——比如页面 zoom 变化时自定义下拉的定位偏移、屏幕阅读器对动态菜单的播报顺序、以及表单 reset 时如何同步还原状态。这些细节比“怎么设高度”本身更消耗开发时间。
