直接设 height 或 line-height 对 select 无效，因其为替换元素，顶部“选中区”与独立弹出的“菜单层”分离，后者由系统渲染且 css 无法穿透；size 属性是唯一原生可控方案，可设定可见行数并影响整体高度。
为什么直接设 height 或 line-height 没用
因为 <select></select> 是替换元素，浏览器把它拆成两块：顶部“选中区”（CSS 可部分影响）和独立弹出的“菜单层”（由操作系统或 UA 渲染，CSS 完全穿不透）。你写 height: 40px，只压扁按钮区；点开后菜单仍按系统默认行高显示 8–10 行，line-height、padding 甚至 max-height 对 <option></option> 全无效。Chrome 看似响应了 height，但 focus/hover 后菜单高度突变，就是典型穿帮。
size 属性是唯一原生可控方案
这是唯一跨浏览器、无需 JS、语义正确且无障碍友好的方式——它让 <select></select> 切换为常驻列表模式，真正控制可见行数与整体高度。
-
size="4"→ 固定显示 4 行选项，超出自动滚动，高度 = 4 × 浏览器默认行高（约 24–28px） -
size="1"等效于默认下拉行为，但旧版 Safari 可能丢失箭头，慎用 - 搭配
multiple可多选，但提交仍是单值（除非后端明确接收数组） - 移动端建议
size ≤ 6，否则渲染重、滚动卡顿
想保留下拉样式？只能自定义 <div> + <ul>
<p>当设计要求“点击展开 + 最大高度 200px + 每项行高 36px + 自定义滚动条”，原生 <code><select></select> 已到极限。必须用真实 DOM 替代：
- 隐藏原生
<select></select>（position: absolute; opacity: 0; pointer-events: none;），保留表单语义和可访问性
- 下拉容器（
<ul></ul>）设 max-height: 200px + overflow-y: auto，这才是真生效的限高
- 每项（
<li>）可用 padding: 10px 12px 或 line-height: 1.5 精确控高
- 必须监听
Escape、ArrowDown/Up、Enter 和外部点击，否则键盘和屏幕阅读器不可用
统一多个下拉框视觉高度的轻量技巧
<select></select>（position: absolute; opacity: 0; pointer-events: none;），保留表单语义和可访问性<ul></ul>）设 max-height: 200px + overflow-y: auto，这才是真生效的限高<li>）可用 padding: 10px 12px 或 line-height: 1.5 精确控高Escape、ArrowDown/Up、Enter 和外部点击，否则键盘和屏幕阅读器不可用若只需“看起来一样高”，别碰 size 或重写组件，用 transform: scale() 最省事：
-
transform: scale(1, 0.8)垂直压缩，配合transform-origin: top center防偏移 - 加
margin-top补偿上移（如margin-top: 4px） - 同步调大
font-size（如从14px→16px），避免文字过小 - 更稳做法：统一用
padding: 10px 12px+box-sizing: border-box+appearance: none，再手动加背景箭头
真正麻烦的不是怎么设高，而是很多人直到上线才发现：iOS Safari 的触摸热区必须 ≥ 44×44px，而 transform: scale() 会缩小热区，size 在移动端又常被忽略——这些细节，不真机测一遍根本绕不过去。
