直接设 height 对 <select> 无效，因浏览器将选中区与弹出层分离渲染；padding 是唯一跨浏览器可靠的视觉压缩方式；控制展开高度需作用于父容器的 max-height + overflow-y: auto；彻底可控须放弃原生 <select>，改用语义化自定义组件。
直接设 height 对 <select> 无效
你给 <select> 写 height: 32px，看起来“变矮”了，但点开下拉菜单后，选项行高、弹出高度、滚动条位置全都不受控——这是浏览器把选中区和弹出层拆成两个渲染单元导致的。Chrome/Edge 尤其明显，Firefox 略宽松但也不稳定，iOS Safari 几乎完全无视。这不是你 CSS 写错了，是原生控件根本没暴露这个控制权。
padding 是最稳的视觉压缩方式
想让下拉框“看起来更紧凑”，padding 是唯一跨浏览器可靠的方法。它不改变弹出层逻辑，只撑开可见区域，同时自然带动文字垂直居中：
-
padding: 4px 12px比padding: 8px 12px视觉上矮一截，且多数浏览器会同步压缩内部文字间距 - 避免单独设
padding-top或padding-bottom，部分 Safari 版本会错位 - 如果用了
box-sizing: border-box，记得把height和padding一起算，否则可能意外溢出
父容器加 max-height + overflow-y: auto
真正起作用的是控制“展开后”的高度，不是 <select> 本身。必须作用在它的**父容器**（比如 <div class="input-group">）上：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
-
max-height: 200px配合overflow-y: auto，能让弹出内容超出时自动滚动，而不是无限撑高 - 别写在
<select>上——多数浏览器忽略，或只在 Firefox 中偶现效果 - 移动端要注意：iOS Safari 的原生弹出菜单不受此限制，它会另起全屏选择器，所以这招只对桌面端和 Android Chrome 的内联下拉有效
要彻底可控，就得放弃 <select>
如果你的需求是“下拉项高度统一为 36px”“展开后宽度铺满父容器”“支持键盘上下键精确跳转”，那原生 <select> 已经到头了。此时必须用 <div> + <button> + <ul> 模拟：
立即学习“前端免费学习笔记（深入）”；
- 所有尺寸由你定：
line-height、padding、max-height全生效 - 必须手动加
aria-expanded、role="listbox"、role="option"，否则屏幕阅读器无法识别 - 点击外部收起要用
document.addEventListener('click')，不能只靠blur——后者在点击下拉项时会先触发，导致菜单闪退
最易被忽略的一点：哪怕你只改了外观，只要用了 appearance: none + 自定义箭头，也得处理 iOS 的 44×44px 最小触摸热区，否则用户点不中。
