原生 <select> 的 height 对弹出菜单无效，仅影响顶部可点击区；唯一跨浏览器控制可见选项数的方案是 size 属性；需精确限高+保留下拉交互时必须自定义 <div> + <ul>。
原生 <select> 的 height 属性对下拉弹出菜单（popup）完全无效，它只可能压扁顶部可点击区域；真正能控制“可见选项数量”的唯一跨浏览器方案是 size 属性，而要同时保留下拉交互 + 精确限高，则必须用 <div> + <ul> 自定义。
为什么直接设 height 或 line-height 失效
因为 <select> 是替换元素，浏览器把它拆成两部分渲染：顶部“选中区”（CSS 可有限干预）和脱离文档流的系统级弹出菜单（CSS 完全无法穿透）。你在 Chrome、Edge 或 Safari 里写 height: 40px，只会让按钮区变矮，点开后仍显示 8–12 行默认高度的选项，且滚动条行为不可控。更关键的是：line-height 对 <select> 本身无效——它不参与行盒布局。
-
padding是唯一稳定影响选中区视觉高度的方式（如padding: 10px 12px） -
appearance: none只能隐藏箭头，不开放对弹层的样式控制权 - iOS Safari 强制最小触摸热区为
44×44px，硬缩到28px就点不中
用 size 属性控制可见行数（最稳原生方案）
size 是 HTML 原生属性，它让 <select> 以多行列表形式常驻展开，此时高度由行数 × 浏览器默认行高决定，滚动稳定、无障碍支持好，且无需 JS。
- 写法：
<select size="5"><option>A</option></select>→ 展开时固定显示 5 行，超出自动滚动 -
size="1"等效于默认单选下拉，但某些旧版 Safari 下可能丢失箭头，慎用 - 副作用：
size值越大，DOM 渲染越重；移动端长列表建议不超过6 - 注意：
size和multiple可共存，但加了multiple后视觉变成多选列表，不再是传统下拉箭头样式
用 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防止垂直错位 - 警告：Chrome 120+ 会对缩放表单元素报 “form elements not scalable” 可访问性警告
彻底自定义下拉（需要 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>要映射到自定义按钮和菜单上 - 原生
<select>应保留在 DOM 中（设position: absolute; opacity: 0; pointer-events: none;），仅用于表单提交和屏幕阅读器识别
真正需要一致单项高度、hover 高亮、键盘导航或虚拟滚动的场景，基本都绕不开自定义组件——这不是过度设计，而是浏览器能力边界决定的。
