直接设 height 对 select 无效，因弹出菜单由系统渲染且 CSS 不穿透；唯一原生可控方案是 size 属性；微调可用 transform: scale()；高定制需求须彻底替换为自定义组件。
直接给 <select></select> 设 height 几乎没用——它只可能压扁顶部按钮区，点开后的下拉菜单高度、行数、滚动行为全不受控。真正能改“展开后看起来多高”的，只有 size 属性；想微调视觉尺寸，transform: scale() 是少数安全选项；真要精确控制每项高度、滚动条样式或键盘导航，就得放弃原生 <select></select>。
为什么 height 和 line-height 对 <select></select> 无效
浏览器把 <select></select> 拆成两层：顶部可点击的“选中区”（CSS 能有限影响）和脱离文档流的弹出菜单（由操作系统或 UA 渲染，CSS 完全穿不透）。你写的 height: 40px 在 DevTools 里被划掉，不是优先级问题，是它根本没被解析。同理：
-
option { height: 40px }、line-height: 2.5全部静默失败，Chrome/Firefox/Safari/iOS Safari 一律无视 -
padding只影响选中区文字垂直居中，不影响弹出层行高 - iOS Safari 强制最小触摸热区为 44×44px，硬设
height: 24px会导致点不中
用 size 属性控制可见行数（原生最稳方案）
size 是 HTML 原生属性，不是 CSS，它是目前唯一跨浏览器、不依赖 JS、能稳定控制“展开后显示几行”的方式。它让 <select></select> 切换为常驻列表模式，此时高度由行数 × 浏览器默认行高决定。
- 写法：
<select size="4"><option>A</option></select>→ 展开后固定显示 4 行，超出自动滚动 -
size="1"等效于默认单选下拉，但旧版 Safari 可能丢失箭头，慎用 -
size值必须是纯数字字符串（如"5"），不能带单位（"5px"会失效） - 副作用：交互从“点击展开”变成“常驻列表”，移动端易误触，且无法配合
max-height实现弹性限高
用 transform: scale() 微调视觉高度（轻量折中）
如果必须保留单选下拉样式又想压缩整体视觉尺寸，transform: scale(1, 0.85) 是比硬改 height 更可控的方式——它缩放整个元素（含文字、边框），不会触发弹出层渲染错乱。
立即学习“前端免费学习笔记（深入）”；
- 必须加
transform-origin: top center，否则元素整体上移 - 补
margin-top: 4px抵消上偏移，否则布局错位 - 同步调大
font-size（如原14px→ 改为16px），避免缩放后文字糊成一团 - Chrome 120+ 会报 “form elements not scalable” 可访问性警告，政务/金融类表单慎用
彻底自定义下拉组件（100% 可控但细节极多）
当设计要求明确包含「固定最大高度 200px + 每项 48px 行高 + hover 高亮 + 键盘导航」时，放弃原生 <select></select> 是唯一路径。核心是隐藏原生元素，用 <div> + <code><button></button> + <ul></ul> 模拟，并用 JS 同步值。
-
<ul></ul>上设max-height: 200px+overflow-y: auto，而不是父容器 —— 滚动必须作用在真正承载菜单项的容器上 - 每个
<li>可自由设padding、line-height、min-height，完全自主 - 必须监听
Escape键收起、ArrowDown/Up导航、Enter确认、外部点击关闭 - 原生
<select></select>必须保留在 DOM 中（position: absolute; opacity: 0; pointer-events: none;），并同步更新其value和aria-selected
真正难的不是写代码，而是所有自定义下拉都得过一遍可访问性校验——漏掉 aria-expanded 或焦点管理，屏幕阅读器用户就卡死在第一个选项上。
