原生 的 height 不生效是因为其下拉弹层为系统级 ui，css 无法控制；应使用 padding + box-sizing: border-box 控制视觉高度，或改用语义化自定义组件实现精确样式与无障碍支持。
原生 <select></select> 的 height 为什么总不生效
因为浏览器把 <select></select> 当作“黑盒控件”：顶部可点击区域（选中区）能被 height 和 padding 影响，但点开后的下拉弹层是系统级 UI 绘制的，CSS 完全穿不透。你在 Chrome 或 Edge 里设 height: 40px，只会压扁顶部按钮区；弹出菜单依然按默认行高显示 8–10 行，滚动条位置、项间距、文字垂直对齐全不受控。
padding + box-sizing: border-box 是最稳的视觉高度控制法
想让多个 <select></select> 看起来等高、文字居中、边框协调，别碰 line-height（它对 <select></select> 无效），直接用内边距撑开：
-
padding: 10px 12px是常用起点，文字基本垂直居中 - 必须加
box-sizing: border-box，否则border和padding会额外增加总高度 - 配合
font-size: 14px和border: 1px solid #ccc，能快速统一多处下拉框的视觉体量 - Firefox 对
padding响应最一致；Safari 在 iOS 上可能略压缩，但比height可靠得多
要真正统一下拉弹层高度？只能放弃原生 <select></select>
如果你的需求是“所有选项最多显示 5 行，超出滚动，且每行固定 32px 高”，原生方案做不到。必须用语义化模拟组件：
- 结构用
<div class="custom-select"> <button>…</button><ul><li>…</li></ul> </div> - 给
<ul></ul>设max-height: 160px（5 × 32）、overflow-y: auto，<li>设height: 32px+line-height: 32px - 保留
<select></select>做降级和表单提交后备，用 JS 同步 value 并监听change - 别漏掉
aria-expanded和键盘支持（ArrowDown/Enter/Escape），否则在 Windows 高对比模式或读屏器下直接不可用
移动端和无障碍的隐藏雷区
即使你用 transform: scale() 强行缩放 <select></select> 来“统一高度”，iOS Safari 仍要求触摸热区 ≥ 44×44px，缩太小就点不中；Chrome 120+ 会对缩放后的表单元素报可访问性警告。而自定义方案若没设 color、background-color 和 border 的明确值，在 Windows 高对比模式下可能整片空白——这些不是边缘情况，是上线后真实被用户投诉过的点。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
