原生弹出框高度无法通过css控制，因其由操作系统级ui组件渲染；唯一跨浏览器限高方式是使用size属性切换为常驻列表模式；如需精确控高与交互，必须自定义+结构。

原生 <select></select> 的弹出框高度根本调不了

不是你 CSS 写得不对，是浏览器压根不让你调。Chrome、Edge 在 Windows 上调用系统 ComboBox，Safari 在 macOS 上用 NSPopUpButton，iOS/Android 则直接走全屏或半屏 modal —— 这些全是操作系统级 UI 层，CSS height、max-height、line-height 全部穿不透。<option></option> 上加样式？所有主流浏览器都忽略。你看到的“按钮区”能被 height 压扁，但点开后的弹出层，行数（通常 8–12 行）、每行高度、滚动逻辑，全由 UA 自行决定。

size 属性是唯一跨浏览器生效的“限高”手段

它不控制弹出框，而是让 <select></select> 切换为常驻列表模式——此时高度才真正归你管。写法简单：<select size="4"></select> 就固定显示 4 行选项，超出自动滚动。关键点：

HTML汇报生成器

🚀 不用写一行代码！把项目总结、工作汇报、研究报告、技术文档、提案、数据看板直接变精美HTML。12种主题 × 11种背景动效 × 9种鼠标特效 × 10种边框样式 × 实时调色器 × 毛玻璃卡片 × PDF导出，生成后还能自由调色，零门槛AI直出。触发词：项目总结、工作汇报、PPT、生成报告、做个总结、HTML文档、数据报告、流程文档、会议纪要、技术文档、研究报告、数据看板、提案、做个展示页、帮我做个汇报、文档生成。

下载

• size="1" 等效于默认单选下拉，但旧版 Safari 可能丢箭头，慎用
• 搭配 multiple 可多选，语义仍是单值提交（除非后端明确接收数组）
• 移动端可能降级为全屏选择器，size 被无视；长列表建议 ≤ 6，避免 DOM 渲染过重
• 此时 height、padding、font-size 才对整个容器生效，但交互已从“点击展开”变成“静态列表”

想保留点击展开 + 精确控高？只能自定义 <div> + <code><ul></ul>

这是唯一能同时满足“点击触发”“最大高度 200px”“每项 padding: 10px 12px”“自定义滚动条”的路径。核心实操：

• 隐藏原生 <select></select>：position: absolute; opacity: 0; pointer-events: none;
• 下拉容器（<ul></ul>）设 max-height: 200px; overflow-y: auto;，别设在父 <div> 上 <li>每项 <code><li> 用 min-height: 36px 或 line-height: 1.5 精确控高，别依赖 height
• 必须监听 Escape、ArrowDown/Up、Enter 和外部点击，否则键盘和屏幕阅读器不可用

transform: scale() 是视觉微调的折中方案，但有坑

如果只是想让下拉按钮区“看起来更紧凑”，transform: scale(1, 0.75) 比硬改 height 更可控——它缩放整个元素（含文字），不会干扰弹出层渲染逻辑。但要注意：

• 必须补 transform-origin: top center 和 margin-top，否则元素上移错位
• 同步调大 font-size（如从 14px → 16px），避免缩放后文字过小
• 若父容器是 flex 布局，需额外设 align-items: center 防止垂直偏移
• Lighthouse 会警告可访问性风险：缩放后触摸热区可能小于 44×44px，iOS 上点不中
真正难的不是“怎么设高度”，而是接受一个事实：原生 <select></select> 的弹出层从来就不是网页 DOM 的一部分。你调的不是它的高度，是在跟操作系统协商显示权限。