原生 的 height 属性仅影响顶部选中区，无法控制下拉菜单高度；因其弹出层由系统/浏览器底层绘制，css 无法穿透， 也基本不支持样式。

height 对原生 <select></select> 元素基本无效，尤其在 Chrome/Edge/Firefox 新版本中——它只能压扁顶部选中区，弹出的下拉菜单（popup）完全不受控制。

为什么直接设 height 看似生效却不管用

浏览器把 <select></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></select>，配合 transform-origin: top center 和 margin-top 补偿位移。注意：文字、边框、箭头同步缩小，需手动调 font-size 匹配
• 对包裹 <select></select> 的父容器（如 <div class="input-wrapper">）设 <code>max-height + overflow-y: auto —— 这不是改下拉高度，而是限制它展开时占用的页面空间，避免撑开布局

  示例：

  

  Article To Html

  文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

  下载

  .input-wrapper {
    max-height: 120px;
    overflow-y: auto;
  }
  

  该方式对含长文本或大量 <option></option> 的场景最实用，且无障碍友好（滚动仍可用键盘操作）。

  <option></option> 样式根本不能设？是的，别白费劲

  <option></option> 在绝大多数浏览器中无视 height、line-height、padding、color（除部分 Firefox 支持 color）等 CSS 属性。这是规范限制，不是兼容性问题。

  • 想截断过长选项文本？只能靠 JS 动态截取后缀加 …，或提前处理数据
  • 想统一行高？唯一可靠路径是放弃原生 <select></select>，用 <div> + <code><ul></ul> + aria-expanded 手动实现
  • 用 appearance: none 只能隐藏箭头，不解除弹出菜单的样式锁定

  真正需要精确控制下拉项高度和滚动行为时，原生 <select></select> 就是技术边界。这时候不是“怎么设”，而是“该不该用”。