直接设 height 无效，因 select 是替换元素，其“选中区”与“弹出菜单”分离，height 仅影响前者，而 option 不支持 height/line-height/padding 等样式，属规范限制。
直接设 height 为什么无效
因为 select 是替换元素，浏览器把它拆成两部分：顶部可样式化的“选中区”和底层由操作系统绘制的“弹出菜单”。你写的 height: 40px 只可能压扁前者，而点开后的下拉列表行高、项数、滚动行为完全不受控——Chrome/Edge 尤其明显，Firefox 稍好，Safari 基本无视。更关键的是，option 标签本身对 height、line-height、padding 全部静默忽略，这不是写法问题，是规范限制。
padding + box-sizing: border-box 是最稳的视觉对齐方案
想让多个 select 和 input 在页面上看起来高度一致，别碰 height，改用内边距撑开：
- 统一设
padding: 10px 12px（上下 10px 能让文字基本垂直居中） - 必须加
box-sizing: border-box，否则border和padding会额外增加总高度 - 显式声明
font-family和font-size，避免字体继承不一致导致行高塌陷 - 删掉所有
-webkit-appearance: none或appearance: none，它们会干扰 UA 默认渲染逻辑，尤其在 macOS 和 iOS 下容易卡在非默认尺寸
动态还原默认高度时只清 style.height 不够
用 JS 恢复原生高度，仅执行 select.style.height = '' 是无效的——它只清空内联样式，class 或外部 CSS 中的 height 依然生效。真正可靠的做法是：
- 先移除相关 class：
select.classList.remove('custom-height') - 再重置关键属性：
select.style.height = 'unset'、select.style.minHeight = '0'、select.style.padding = '0.375em 0.75em' - 检查父容器是否用了
flex、grid或display: table-cell强行拉伸了select - 如果之前设过
size属性（如size="4"），也要一并移除，否则会强制显示多行并破坏聚焦逻辑
真要控制弹出菜单高度？只能放弃原生 select
所谓“下拉列表高度不对”，很多时候其实是混淆了两个独立维度：选中区高度（前端可控）和弹出菜单高度（系统级不可控）。如果你的需求是“弹出层最多显示 5 行、每行 32px、支持滚动、跨浏览器一致”，原生方案做不到。唯一路径是用语义化自定义组件：
立即学习“前端免费学习笔记（深入）”；
- 结构用
<div class="custom-select"><button>...</button><ul role="listbox">...</ul></div> -
ul上设max-height: 160px（5 × 32）、overflow-y: auto，li用height: 32px+display: flex; align-items: center精确控制单行 - 保留原生
select作为降级后备，用 JS 同步 value 并监听change - 必须实现
aria-expanded、键盘导航（ArrowDown/Enter/Escape）和移动端touchstart阻止默认行为，否则在 Windows 高对比模式或读屏器下直接不可用
真正难的不是调一个像素，而是接受这个事实：浏览器把 select 的弹出层交给了操作系统，你写的 CSS 到不了那里。强行用 transform 缩放或 appearance hack，只会换来兼容性雷区和可访问性警告。
