原生<select>弹出框高度无法通过CSS控制，因其由操作系统级UI组件渲染；唯一跨浏览器限高方式是使用size属性切换为常驻列表模式；如需精确控高与交互，必须自定义<div>+<ul>结构。
原生 <select> 的弹出框高度根本调不了
不是你 CSS 写得不对，是浏览器压根不让你调。Chrome、Edge 在 Windows 上调用系统 ComboBox，Safari 在 macOS 上用 NSPopUpButton，iOS/Android 则直接走全屏或半屏 modal —— 这些全是操作系统级 UI 层，CSS height、max-height、line-height 全部穿不透。<option> 上加样式？所有主流浏览器都忽略。你看到的“按钮区”能被 height 压扁，但点开后的弹出层，行数（通常 8–12 行）、每行高度、滚动逻辑，全由 UA 自行决定。
size 属性是唯一跨浏览器生效的“限高”手段
它不控制弹出框，而是让 <select> 切换为常驻列表模式——此时高度才真正归你管。写法简单：<select size="4"> 就固定显示 4 行选项，超出自动滚动。关键点：
-
size="1"等效于默认单选下拉，但旧版 Safari 可能丢箭头，慎用 - 搭配
multiple可多选，语义仍是单值提交（除非后端明确接收数组） - 移动端可能降级为全屏选择器，
size被无视；长列表建议 ≤ 6，避免 DOM 渲染过重 - 此时
height、padding、font-size才对整个容器生效，但交互已从“点击展开”变成“静态列表”
想保留点击展开 + 精确控高？只能自定义 <div> + <ul>
这是唯一能同时满足“点击触发”“最大高度 200px”“每项 padding: 10px 12px”“自定义滚动条”的路径。核心实操：
- 隐藏原生
<select>：position: absolute; opacity: 0; pointer-events: none; - 下拉容器（
<ul>）设max-height: 200px; overflow-y: auto;，别设在父<div>上 - 每项
<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> 的弹出层从来就不是网页 DOM 的一部分。你调的不是它的高度，是在跟操作系统协商显示权限。 
