原生的height仅影响顶部触发区，弹出菜单由系统控制无法CSS干预；唯一轻量方案是padding+box-sizing；需用size属性控制展开行数；高度定制必须重写为自定义组件。
height 对原生 <select></select> 无效，所谓“一键修改”只能作用于顶部触发区，弹出菜单高度由系统控制，无法用 CSS 一键干预。
为什么直接写 height: 40px 在所有 <select></select> 上都失效
浏览器把 <select></select> 拆成两层：上层是可样式化的“选中区”，下层是操作系统绘制的独立弹出菜单。你设的 height 只可能压扁前者，后者完全不受影响——Chrome/Firefox/Safari 表现不一，但结果一致：点开后还是默认行高、默认项数、自带滚动条。
-
line-height、padding在<option></option>上静默失败，写了等于没写 - 移动端（尤其 iOS Safari）会强制将点击热区拉到 44×44px，哪怕你
height: 20px，实际响应区域仍是 44px -
transform: scale()虽能缩放整个控件，但 Chrome 120+ 会报可访问性警告，iOS 上可能点不中
真正能“批量生效”的轻量方案：用 padding + box-sizing
这是唯一不依赖 JS、兼容所有现代浏览器、且视觉高度稳定的方案。它不欺骗浏览器，而是顺势利用可控制的部分。
- 统一加
box-sizing: border-box，确保height包含padding和border - 用
padding: 10px 12px替代height控制视觉高度，文字自然垂直居中 - 加
appearance: none和-webkit-appearance: none剥掉原生箭头，再用::after画图标，避免错位 - 别碰
font-size过小（如 12px），移动端至少保持 14px，否则热区易失效
想控制“展开后显示几行”？只认 size 属性
这是 HTML 原生唯一能稳定影响可见选项数量的方式，无需 JS，无障碍支持好。
立即学习“前端免费学习笔记（深入）”；
-
<select size="5"></select>强制显示 5 行<option></option>，超出自动滚动，高度由行数 × 浏览器默认行高决定 -
size="1"等效于默认下拉行为，但某些旧版 Safari 下可能丢失箭头，慎用 - 移动端慎用大
size（如 >6），长列表易撑开布局，且部分 Android WebView 忽略该属性 - 若需多选，可同时加
multiple，但 UI 风格会变成列表式，不再是传统下拉
真要“自定义展开高度”？必须放弃原生 <select></select>
当设计要求明确包含「max-height: 200px」「每行 line-height: 32px」「带自定义滚动条」时，绕不开重写。这不是优化，是替换。
- 结构用
<div class="custom-select"> <button></button><ul role="listbox"></ul> </div> -
<ul></ul>设max-height: 200px+overflow-y: auto，高度完全可控 - 每个
<li role="option">可自由设padding、line-height、height - 必须手动处理：
aria-expanded切换、Escape关闭、ArrowDown/Up导航、touchstart阻断 300ms 延迟
最常被忽略的不是代码怎么写，而是所有自定义下拉都得过一遍可访问性校验——漏掉 aria-selected 或焦点管理，屏幕阅读器用户就卡死在第一个选项上。
