原生 <select> 的 height 和 line-height 无效，因其为替换元素，弹出菜单由系统控制；可用 padding 或 box-sizing: border-box 配合 height 调整视觉高度，完全可控需自定义组件。
height 对原生 <select> 无效，别白调 —— 它只能勉强压扁顶部选中区，弹出菜单的行高、项数、滚动条全由系统控制，CSS 插不上手。
为什么 height 和 line-height 都不生效
因为 <select> 是替换元素（replaced element），浏览器把它拆成两块：上面可样式化的“按钮区”，和下面独立绘制的“弹出菜单”。后者走操作系统 UI 或 UA 样式，height、line-height、padding（对 <option>）统统被忽略。
常见错误现象：
- 设了
height: 32px，文字挤到顶上或截断，但点击后弹出菜单还是默认高度 - 加了
line-height: 32px，完全没反应 - 在 Chrome / Edge 中用
appearance: none隐藏箭头，但下拉项依然无法调整行高
Firefox 偶尔能响应 height，iOS Safari 几乎完全无视 —— 别指望跨浏览器一致。
立即学习“前端免费学习笔记（深入）”；
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
真正能控制“看起来多高”的两个轻量方案
不引入框架，也能让下拉框视觉更紧凑或更舒展：
- 用
padding撑开<select>可见区域：比如padding: 6px 12px，文字自动垂直居中，兼容性最好 - 组合
height+box-sizing: border-box+padding精确控高：例如height: 40px; box-sizing: border-box; padding: 10px 12px - 用
transform: scale(1, 0.8)缩放整个控件（含文字和边框），再用margin-top补偿位移；注意 Chrome 120+ 会报可访问性警告，慎用于表单关键字段
别碰 size 属性：虽然 <select size="4"> 能强制显示 4 行，但它把下拉框变成多选列表模式（multiple 效果），失去单选语义和聚焦行为，容易引发表单验证异常。
需要完全可控？必须放弃原生 <select>
当设计要求统一行高、自定义滚动、支持搜索、或适配高对比模式时，原生方案已到极限。此时得用 <div> + <button> + <ul> 模拟：
-
<ul>上设max-height和overflow-y: auto控制滚动范围 - 所有尺寸（
line-height、padding、height）都可自由设置 - 必须手动实现键盘支持：
ArrowDown/ArrowUp移动焦点，Enter确认，Escape关闭 - 用
aria-expanded、aria-controls、role="listbox"等保无障碍，否则屏幕阅读器无法识别
iOS Safari 对触摸热区有 44×44px 最小尺寸要求，强行缩小自定义下拉触发区会导致点不中 —— 这个细节常被跳过，直到测试阶段才发现交互失效。
