select是替换元素，min-height被忽略；应使用height+padding+box-sizing组合控制可见区域高度，下拉菜单高度无法用css控制。
给 select 加 min-height 为什么没反应
因为 select 是替换元素（replaced element），其高度由浏览器或操作系统控件决定，min-height 在大多数场景下会被忽略——尤其在 Chrome/Edge 中，它只影响“选中区域”的视觉高度，但弹出菜单仍按默认行高展开，且不响应 min-height。你看到的“生效”，往往只是 padding 或 font-size 带来的副作用。
select 的最小高度只能靠 height + padding + box-sizing 控制
真正能稳定撑开 select 可见区域的组合是：
-
height设固定像素值（如44px），它是唯一被广泛支持的高度锚点 -
padding补足垂直空间并辅助文字居中（如padding: 10px 12px） -
box-sizing: border-box必须加上，否则padding会让总高度超出预期 - 避免用
line-height——对select完全无效
示例：
.custom-select {
height: 44px;
padding: 10px 12px;
box-sizing: border-box;
font-size: 16px;
}
想让下拉弹层也“看起来更高”？别试 option 样式
option 元素几乎无法用 CSS 控制高度：Chrome/Firefox/Safari 都无视 height、padding、line-height；iOS 和 Android WebView 更是完全封闭。你写的 option { min-height: 40px; } 在任何主流浏览器里都不会生效。
- 所谓“统一选项高度”，实际是 UA 样式或系统菜单决定的，开发者无权干预
- 如果必须控制弹层外观（比如行高、项数、滚动行为），唯一可靠路径是用
<div> + <code><ul></ul>+ JS 自定义下拉组件 - 轻量替代方案：用
transform: scale(1, 0.9)缩放整个select，再微调margin-top补偿偏移——但注意 Chrome 120+ 已对缩放表单元素发出可访问性警告 - 务必显式声明
display: block或display: inline-block - 用
min-height: 44px+padding双保险，比单写height更安全（防内容过少时塌缩） - 加
min-width: 44px防窄文本导致热区过小 - 检查 DevTools 的 Computed 面板，确认最终
display值不是inline
移动端最小触控高度 44px 怎么保底
仅靠 height: 44px 不够，因为某些 CSS 重置会把 select 强制设为 display: inline，导致 padding-top/bottom 被忽略（尤其旧版 Safari）。
最常被忽略的一点：select 的最小高度从来不是纯 CSS 问题，而是“可见区域”和“弹出菜单”两个独立渲染层的协同问题。强行用样式压低或拉高，大概率换来不可点、错位、或 Lighthouse 报告失败。真要一致可控，就得接受自定义下拉的成本。
