直接设 height 对 <select> 无效，仅压扁顶部按钮区，不影响下拉菜单；唯一稳定控制可视高度的方案是 padding + box-sizing: border-box，它通过内边距撑开选中区并确保跨浏览器一致性和可访问性。
直接设 height 对 <select> 无效，它只可能压扁顶部按钮区，完全不影响下拉弹出菜单的行高和项数；真正能稳定控制“可视区域高度”的，只有 padding + box-sizing: border-box 组合。
用 padding + box-sizing 精确撑开选中区高度
padding 是唯一在所有主流浏览器中表现一致、且不触发兼容性或可访问性警告的方案。它通过内边距把文字“推”到视觉居中位置，同时让整个可点击区域达到预期像素高度。
-
height设为固定值（如44px），再配box-sizing: border-box锁定总尺寸 -
padding控制上下留白（如padding: 10px 12px），数值调大则文字更靠下，调小则更靠上 - 必须禁用原生箭头：
appearance: none+-webkit-appearance: none，否则箭头会随 padding 偏移或被裁剪 - 移动端 iOS Safari 强制最小触控热区为
44×44px，height小于该值时点选可能失灵
为什么 line-height 和 min-height 都别试
line-height 对 <select> 完全无效——它是替换元素，不参与 CSS 行盒布局；min-height 在 Chrome/Edge 中基本被忽略，在 Firefox 中行为不稳定，Safari 则直接无视。你看到的“生效”，大概率是 padding 或字体大小变化带来的错觉。
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 给
<option>设height或line-height：所有浏览器均忽略，系统级渲染不可干预 - 在 flex 容器中与
<input>对齐失败：不是height没对齐，而是vertical-align: baseline默认值导致基线错位，应改用align-items: center - 设了
height: 44px但文字贴顶或截断：说明padding不足，需增加上内边距（如从8px改为10px）
想统一多个下拉框的视觉高度？用 transform 缩放更轻量
当表单里有十几个 <select>，且设计稿要求“全部看起来一样高”，transform: scale() 比逐个调 padding 更快，也更容易维护。
立即学习“前端免费学习笔记（深入）”；
-
transform: scale(1, 0.85)垂直压缩 15%，水平不变 - 必须加
transform-origin: top center，否则整体下移 - 补
margin-top: 4px抵消缩放导致的上偏移 - 同步增大
font-size（如从14px改为16px），避免文字过小难读 - Chrome 120+ 会对缩放的表单控件报可访问性警告，仅限内部工具或非关键表单使用
真正麻烦的从来不是“怎么让它变高”，而是“怎么让它变高之后还能点得中、读得清、滚得顺”。padding 方案最稳，transform 方案最快，但只要需求里出现“弹出菜单最多显示 5 行”或“每项固定 32px 高”，就得立刻放弃原生 <select>——那部分根本不在你的 CSS 控制范围内。
