原生 <select> 的 height 仅影响可见区域，无法控制弹出菜单的高度、行高或项数；line-height 和 padding 对 <option> 无效；可用 transform: scale() 或父容器 max-height + overflow-y 轻量调整；如需精确控制，必须用自定义组件替代。
height 对原生 <select> 无效，别硬调——它只可能压扁顶部选中区，弹出菜单的行高、项数、滚动行为完全不受控。
为什么height设了像生效又不顶用？
浏览器把 <select> 当作“原子控件”：可见区域（可被 height 影响）和弹出菜单（系统级绘制，CSS 穿透不了）是两套渲染逻辑。你写 height: 50px，Chrome/Edge 下往往只是把按钮区拉高，点开后菜单还是默认显示 8–10 行，文字挤在中间、上下留白不均。
-
line-height对<select>和<option>都无效，浏览器直接忽略 -
padding在 Firefox 中能撑开可见区，在 Safari 和移动端几乎没反应 -
appearance: none只能去掉箭头，下拉层照样不可样式化
真能调高的两个轻量方案
不引入框架、不重写整套逻辑，也能让下拉框视觉高度可控：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 用
transform: scale(1, 0.7)缩放整个<select>，再配transform-origin: top center和margin-top补偿偏移——适合统一收紧表单密度，但会同步缩放文字和边框，需微调font-size - 给包裹
<select>的父容器（如<div class="input-group">）加max-height: 200px+overflow-y: auto——这不是调高下拉框本身，而是限制弹出菜单的可视区域高度，强制出现滚动条，避免页面被撑开
想彻底自由控制高度？必须放弃原生<select>
只要需求里出现“统一行高”“固定显示 6 行”“选项文字截断+省略号”“宽度铺满父容器”，原生 <select> 就不再适用。此时得用 <div> + <button> + <ul> 模拟，配合 JS 控制显隐与选中状态。这时 max-height、line-height、padding 全部生效，且能加 ARIA 属性保障可访问性。
立即学习“前端免费学习笔记（深入）”；
容易被忽略的一点：哪怕只改一个下拉框，也要同步处理键盘导航（ArrowDown/Enter）、焦点管理（focusin/focusout）和移动端 touchstart，否则在 iOS Safari 或 Android Chrome 上会失焦或点不中。
