原生 <select> 的 height 属性仅影响顶部选中区，无法控制下拉菜单高度；因其弹出层由系统/浏览器底层绘制，CSS 无法穿透，<option> 也基本不支持样式。
height 对原生 <select> 元素基本无效，尤其在 Chrome/Edge/Firefox 新版本中——它只能压扁顶部选中区，弹出的下拉菜单（popup）完全不受控制。
为什么直接设 height 看似生效却不管用
浏览器把 <select> 当作“两段式”控件：顶部可样式化区域 + 底层系统级弹出菜单。后者由 OS 或浏览器 UI 框架绘制，CSS 无法穿透。你写 height: 32px，只缩了按钮高度；点开后，选项行高、项数、滚动条依然按默认渲染（通常每项约 24–32px，最多显示 8 行左右）。
- Firefox 偶尔响应
line-height，但仅限于选中区，不改变弹出项高度 - Safari 极其保守，
height+padding组合常被忽略 - iOS Safari 强制最小触摸热区（44×44px），硬缩到
24px会导致点不中
真正能控制“视觉高度”的两个轻量方案
不引入框架、不重写 DOM，也能让下拉框更紧凑或更统一：
- 用
transform: scale(1, 0.8)缩放整个<select>，配合transform-origin: top center和margin-top补偿位移。注意：文字、边框、箭头同步缩小，需手动调font-size匹配 - 对包裹
<select>的父容器（如<div class="input-wrapper">）设max-height+overflow-y: auto—— 这不是改下拉高度，而是限制它展开时占用的页面空间，避免撑开布局
示例：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
立即学习“前端免费学习笔记（深入）”；
.input-wrapper {
max-height: 120px;
overflow-y: auto;
}
该方式对含长文本或大量 <option> 的场景最实用，且无障碍友好（滚动仍可用键盘操作）。
<option> 样式根本不能设？是的，别白费劲
<option> 在绝大多数浏览器中无视 height、line-height、padding、color（除部分 Firefox 支持 color）等 CSS 属性。这是规范限制，不是兼容性问题。
- 想截断过长选项文本？只能靠 JS 动态截取后缀加
…，或提前处理数据 - 想统一行高？唯一可靠路径是放弃原生
<select>，用<div>+<ul>+aria-expanded手动实现 - 用
appearance: none只能隐藏箭头，不解除弹出菜单的样式锁定
真正需要精确控制下拉项高度和滚动行为时，原生 <select> 就是技术边界。这时候不是“怎么设”，而是“该不该用”。
