height和line-height对原生无效，因其为替换元素，渲染分选中区和系统级弹层；可用padding撑高、size属性控显行数或transform缩放，但移动端推荐padding，复杂需求须自定义组件。
height 对原生 <select></select> 无效，别白调 —— 这是绝大多数人卡住的第一步。
为什么 height 和 line-height 都不生效
因为 <select></select> 是替换元素（replaced element），浏览器把它拆成两块渲染：顶部可样式化的“选中区” + 独立绘制的系统级下拉弹层。你设的 height: 40px 可能只压扁了按钮区，点开后菜单还是默认高度、默认行距、自带滚动条；line-height 则直接被忽略，连 warning 都不报。
常见错误现象：
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- Chrome / Edge 中
height像起了作用，但 hover 或 focus 后弹出菜单突然“撑高” - 给
<option></option>加padding或height，完全没反应（移动端尤其明显） - Firefox 偶尔响应
padding，但换台机器或升个版本就失效
真正能用的三种轻量方案
不引入框架、不写一堆 JS，也能控高：
-
用
padding撑开选中区高度：最稳，兼容所有现代浏览器。select { padding: 10px 12px; }既拉高视觉区域，又让文字垂直居中 -
加
size属性控制可见选项行数：比如<select size="4"></select>会强制显示 4 行<option></option>，不点开就可见，且滚动行为可控（注意：这会让下拉框变成多行列表式，不是传统点击弹出） -
用
transform: scale()缩放整个控件：如select { transform: scale(1, 0.8); transform-origin: top center; margin-top: 4px; }。慎用 —— Chrome 120+ 会因可访问性问题报 Lighthouse 警告，iOS Safari 触摸热区可能变小点不中
什么时候必须放弃原生 <select></select>
当你要满足以下任一条件时，原生方案已到极限：
- 下拉菜单需支持超过 20 项 + 滚动 + 搜索过滤
- 要求所有选项行高统一、文字上下留白精确到 px
- 要适配 Windows 高对比模式或 iOS 旁白（VoiceOver）等辅助技术
- 设计稿明确要求下拉层宽度 > 选中区，或带阴影/圆角/过渡动画
此时应直接上自定义方案：<div class="custom-select">
<button></button><ul aria-expanded="false"></ul>
</div>，用 JS 控制显隐和选中，所有尺寸（max-height、line-height、padding）完全自由 —— 但别忘了 aria-expanded、tabindex 和 Escape 键关闭逻辑。
容易被忽略的移动端雷区
iOS Safari 对 <select></select> 有硬性触摸热区要求（约 44px × 44px），哪怕你用 CSS 把它缩到 20px 高，实际可点击区域仍是 44px；Android Chrome 则可能直接忽略 transform 缩放。如果产品主流量在移动端，padding 是唯一靠谱的起点，其余都得靠自定义组件兜底。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
