line-height 对 select 无效，因其为替换元素，渲染由系统控件接管；仅 padding 和 height + box-sizing 可调节选中区高度，option 高度无法用 css 控制，需自定义组件实现精确控制。

line-height 对 select 无效，别浪费时间试

line-height 在 <select></select> 元素上完全不生效——这不是你写错了选择器，而是浏览器规范决定的。因为 select 是替换元素（replaced element），它的渲染由操作系统控件或 UA 样式接管，CSS 的 line-height 被直接忽略。你在 DevTools 里看到它“被划掉”，不是优先级问题，是根本不可用。

真正能调下拉框“视觉高度”的只有 padding 和 height + box-sizing

想让下拉框选中区看起来更高或更紧凑，只靠这两个组合最稳：

• padding: 10px 12px; —— 最推荐，兼容性好、文字自动垂直居中、不影响弹出菜单
• height: 40px; box-sizing: border-box; —— 配合 padding 微调内边距比例，但注意：Chrome/Edge 下可能只压缩顶部按钮区，弹出菜单行高不变
• 避免单独设 height 不加 box-sizing：默认 content-box 会让实际高度 = height + padding × 2，结果失控

想控制下拉选项（option）高度？基本做不到

<option></option> 几乎不响应任何 CSS 高度相关属性：

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

• padding、height、line-height 在绝大多数浏览器中被无视（Firefox 极少数版本有有限支持，但不可依赖）
• 系统级下拉菜单的行高、项数、滚动行为完全由浏览器/OS 控制，CSS 无法穿透
• 如果你真需要统一选项高度（比如设计系统要求），必须放弃原生 select，改用 <div> + <code><ul></ul> + JS 模拟的自定义下拉组件

  缩放方案能“看起来”变高，但副作用明显

  用 transform: scale(1, 0.8) 可以压扁选中区，反向缩放也能“拉高”，但它不是真实尺寸调整：

  • 会同步缩放文字、边框、箭头，需额外调 font-size 补偿，容易失真
  • transform-origin 和 margin-top 必须配合使用，否则位置偏移
  • 无障碍支持弱，屏幕阅读器仍按原始尺寸理解，aria- 属性不能补救这个缺陷

  真正要精确控制下拉整体高度（包括弹出层），没有绕过自定义组件的捷径。原生 select 的样式自由度就卡在“选中区可调、弹出层不可控”这一条线上，接受它，比硬刚更省时间。