原生 <select> 的 height 和 line-height 无效，因它是替换元素，浏览器将其分为可样式化的按钮区和系统控制的弹出菜单；仅 padding 和 size 属性能安全调节视觉高度与显示行数。
height 对原生 <select> 无效，别白调 —— 它只能压扁顶部选中区，弹出菜单的行高、项数、滚动条完全不受控。
为什么 height 和 line-height 都不生效
因为 <select> 是替换元素（replaced element），浏览器把它拆成两块渲染：上面可样式化的“按钮区”，下面独立绘制的“弹出菜单”。后者由操作系统或 UA 样式控制，CSS 进不去。line-height 直接被忽略；height 只影响前者，且在 Chrome/Edge 中常导致文字贴顶或截断。
-
padding是最稳妥的视觉高度调节方式（例如padding: 10px 12px），能自然撑开并居中文字 -
size="4"属性才是原生控制“显示几行选项”的唯一可靠手段（仅适用于非多选场景） - 给
<option>加padding或height在所有主流浏览器中均无效
想固定下拉弹层最大高度？用 max-height + overflow-y: auto（但仅对自定义下拉有效）
原生 <select> 的弹出层无法设置滚动或高度限制。只有当你用 <div> + <ul> + JS 模拟时，才能真正控制：
/* 自定义下拉容器 */
.dropdown-menu {
max-height: 200px;
overflow-y: auto;
}
.dropdown-menu li {
padding: 8px 12px;
line-height: 1.5;
}- 务必把
max-height和overflow-y放在下拉列表容器（如<ul>）上，不是父<div> - 避免在父容器设
height或min-height，否则会破坏内容自适应逻辑 - 移动端需额外处理触摸热区：iOS 要求最小 44×44px，强行缩小会导致点不中
缩放方案能用，但有硬伤
用 transform: scale(1, 0.8) 看似能压缩整体高度，实际是把整个 <select> 缩小，包括文字和边框：
立即学习“前端免费学习笔记（深入）”；
- 必须同步调整
font-size或加margin-top补偿位移，否则布局错乱 - Chrome 120+ 会对缩放后的表单元素触发可访问性警告（Lighthouse 报 “form elements not scalable”）
- 高对比模式下，缩放可能让文字与背景对比度不足，直接不可读
真正要控制下拉高度，就得放弃原生 <select> —— 不是因为写法不对，而是浏览器从底层就没开放这个控制权。自定义方案看似重，实则是唯一能兼顾高度、滚动、键盘导航、无障碍和跨端一致性的路径。
