直接设置 <select> 的 height 无法统一其弹出菜单高度，因它是替换元素，弹出层由系统渲染且不在 DOM 中；仅能通过 padding + box-sizing: border-box 稳定控制可见触发区高度。
直接给 <select> 设 height 无法真正统一高度，因为浏览器把选中区和弹出菜单分开渲染，你调的只是“按钮部分”，点开后的下拉层仍是系统级黑盒。
为什么height和line-height对<select>基本无效
因为 <select> 是替换元素（replaced element），顶部可点击区域受部分 CSS 影响，但弹出菜单由操作系统或 UA 样式绘制，不在 DOM 中，height、line-height、max-height 全部被忽略。你在 Chrome DevTools 里看到样式“生效”，其实只是压扁了触发区——点开后依然默认显示 8–12 行，每行高度由系统定。
-
option上设任何高度相关样式（height、padding、line-height）都静默失败，iOS Safari 和 Android Chrome 尤其彻底 -
appearance: none只能隐藏原生箭头，不开放对弹出层的控制权 - Firefox 偶尔响应
padding，但行为不稳定，不能作为跨浏览器依据
用padding + box-sizing: border-box稳定控制选中区高度
这是目前最轻量、兼容性最好、且不触发可访问性警告的方案。目标不是“改菜单高度”，而是让多个下拉框的**可见触发区看起来一致**，便于与 <input> 对齐或 UI 统一。
- 必须加
box-sizing: border-box，否则border和padding会额外撑高 - 常用组合：
padding: 10px 12px（文字基本垂直居中），配合font-size: 14px和border: 1px solid #ccc - 避免单独调
line-height—— 它对<select>无效，纯属干扰项 - 移动端 Safari 可能轻微压缩内边距，但比硬设
height可靠得多
用transform: scale()做视觉缩放（慎用）
适合只要“看起来等高”、不强求无障碍合规或高对比模式支持的内部工具类页面。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
立即学习“前端免费学习笔记（深入）”；
- 写法示例：
transform: scale(1, 0.85); transform-origin: top center; margin-top: 4px; - 必须补
margin-top，否则缩放导致整体上移，破坏布局流 - 同步增大
font-size（如从14px改为16px），否则文字过小难读 - Chrome 120+ 会报 “form elements not scalable” 可访问性警告；iOS Safari 强制最小触摸热区 44×44px，缩太小就点不中
真要统一下拉菜单高度？只能放弃<select>
如果你的需求明确包含“弹出层固定显示 5 行、每行 32px、支持滚动、键盘导航、屏幕阅读器可用”，那原生控件做不到。这不是技巧问题，是浏览器能力边界。
- 结构用
<div class="custom-select"><button></button><ul role="listbox"><li role="option"></li></ul></div> -
<ul>上设max-height: 160px（5 × 32）、overflow-y: auto，li自由设height、line-height、padding - 必须实现
aria-expanded、aria-activedescendant、ArrowDown/Enter/Escape键盘支持，否则 Windows 高对比模式或 Narrator 下直接不可用 - 别漏掉
color和background-color的显式声明——高对比模式下无值 = 整片空白
真正容易被忽略的点：所谓“统一高度”，其实是两个独立维度——你能控制的选中区高度，和你根本控制不了的弹出菜单高度。强行用 CSS 把它们绑在一起，只会换来兼容性雷区或可访问性降级。选哪条路，取决于你愿不愿意为“精确控制”付出 JS 和 ARIA 的成本。
