直接设 height 或 line-height 对 select 无效，因其为替换元素，顶部“选中区”与独立弹出的“菜单层”分离，后者由系统渲染且 CSS 无法穿透；size 属性是唯一原生可控方案，可设定可见行数并影响整体高度。
为什么直接设 height 或 line-height 没用
因为 <select> 是替换元素，浏览器把它拆成两块：顶部“选中区”（CSS 可部分影响）和独立弹出的“菜单层”（由操作系统或 UA 渲染，CSS 完全穿不透）。你写 height: 40px，只压扁按钮区；点开后菜单仍按系统默认行高显示 8–10 行，line-height、padding 甚至 max-height 对 <option> 全无效。Chrome 看似响应了 height，但 focus/hover 后菜单高度突变，就是典型穿帮。
size 属性是唯一原生可控方案
这是唯一跨浏览器、无需 JS、语义正确且无障碍友好的方式——它让 <select> 切换为常驻列表模式，真正控制可见行数与整体高度。
-
size="4"→ 固定显示 4 行选项，超出自动滚动，高度 = 4 × 浏览器默认行高（约 24–28px） -
size="1"等效于默认下拉行为，但旧版 Safari 可能丢失箭头，慎用 - 搭配
multiple可多选，但提交仍是单值（除非后端明确接收数组） - 移动端建议
size ≤ 6，否则渲染重、滚动卡顿
想保留下拉样式？只能自定义 <div> + <ul>
当设计要求“点击展开 + 最大高度 200px + 每项行高 36px + 自定义滚动条”，原生 <select> 已到极限。必须用真实 DOM 替代：
- 隐藏原生
<select>（position: absolute; opacity: 0; pointer-events: none;），保留表单语义和可访问性 - 下拉容器（
<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 在移动端又常被忽略——这些细节，不真机测一遍根本绕不过去。
