原生 下拉层无法用 css 控制高度，仅三种有效方案：用 size 属性强制常驻列表、父容器限制可见区并滚动、或彻底替换为自定义组件。
原生 <select></select> 的下拉弹出层是系统级控件，CSS 无法直接控制其高度；真正能生效的只有三种路径：用 size 属性强制常驻列表、用父容器限制可见区域并滚动、或彻底替换为自定义组件。
为什么直接给 <select></select> 设 height 或 max-height 没用
浏览器把 <select></select> 拆成两部分渲染：顶部“选中区”（可被部分 CSS 影响）和独立弹出的“下拉菜单”（由操作系统或 UA 绘制）。你设 height: 40px，只压扁了按钮区；点开后仍显示默认 6–10 行，行高、滚动条、项数全不可控。所有主流浏览器（Chrome/Edge/Safari/iOS/Android）都忽略对弹出层的 CSS 高度干预。
常见错误现象包括：
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
-
option { line-height: 32px; }在 DevTools 里显示“已划掉”，加!important也无效 - 移动端 iOS Safari 强制最小触摸热区为 44×44px，缩得太矮直接点不中
-
transform: scale()看似变矮，但 Chrome 120+ 会报可访问性警告
用 size 属性控制可见行数（最轻量原生方案）
size 是唯一跨浏览器、无需 JS、完全原生支持的限高方式。它让 <select></select> 渲染为多行列表框而非弹出菜单，此时 CSS 高度才真正作用于整个可视区域。
-
size="4"表示始终显示 4 行选项，超出自动出现垂直滚动条 - 必须搭配
width和box-sizing: border-box防止错位或撑宽 - 移动端（尤其 iOS）可能无视
size，强制走全屏选择器，需提前测试 - 失去“点击展开”交互，适合筛选栏、固定展示等场景，不适合表单主输入项
示例：<select size="4"><option>A</option>
<option>B</option></select>
用父容器限制可见区域并启用滚动（折中兼容方案）
当必须保留 size="1" 的下拉行为，又希望用户快速浏览较多选项时，可将 <select></select> 包进一个带滚动的容器——注意：这仅在 size > 1 时生效，size="1" 仍触发原生弹出。
- 给包裹
<select></select>的<div class="select-wrapper"> 设置 <code>max-height: 200px和overflow-y: auto -
<select></select>自身不设height、min-height，避免干扰自适应 - 确保
.select-wrapper有明确宽度（如width: 100%），否则缩放时易错位 - 此法不改变弹出逻辑，仅优化视觉密度，适合后台管理类页面
-
<ul></ul>上设max-height: 200px和overflow-y: auto，这才是真生效的限高 - 每项
<li>可自由设height、line-height、padding，文字垂直居中优先用display: flex; align-items: center - 必须同步保留原生
<select></select>（position: absolute; opacity: 0; pointer-events: none;），用于表单提交与无障碍降级 - 关键可访问性补丁：
aria-expanded、aria-controls、ArrowDown/Up导航、Escape关闭、外部点击收起
自定义下拉组件才是唯一精确控高的解法
若需求包含统一单项高度、hover 高亮、键盘导航、搜索过滤或虚拟滚动，就必须放弃原生 <select></select>，改用 <div> + <code><button></button> + <ul></ul> 模拟。
真正难的不是写几行代码，而是接受一个事实：想精确控高，就得自己画盒子——浏览器没给你留后门。
