直接设height对select无效，因浏览器将其拆为可样式化的触发区和系统绘制的弹出菜单；唯一原生可控方案是用size属性（如size="4"固定显示4行），或通过js+css自定义下拉实现精确高度控制。
直接设 height 在 select 上基本没用
你改了 height: 40px，DevTools 里看着生效，点开下拉菜单后发现高度纹丝不动——这不是你 CSS 写错了，而是浏览器把 select 拆成了两块：顶部可样式化的“触发区”（height 能影响它），和底层由操作系统绘制的“弹出菜单”（height、max-height、line-height 全部失效）。Chrome 和 Edge 尤其严格，Safari 则可能直接忽略缩放或 padding 调整。
用 size 属性控制可见行数（最稳的原生方案）
这是唯一不依赖 JS、全平台一致支持、且真正影响下拉区域高度的方式。它让 select 以常驻列表形式展开，此时 CSS 高度控制才真正起效。
-
size="4"→ 展开时固定显示 4 行选项，超出自动滚动；高度 ≈ 4 × 浏览器默认行高（通常 24–28px） - 必须搭配
display: block或父容器box-sizing: border-box，否则 padding 可能撑破布局 - 慎用
size="1"：等效于默认下拉，但旧版 Safari 可能丢失箭头，iOS 会强制走全屏选择器 - 移动端注意：部分 Android WebView 和 iOS Safari 会无视
size，回退到原生选择器，无法保证视觉一致性
用 transform: scale() 微调触发区视觉高度（轻量折中）
如果你必须保留“点击展开”交互，又想让按钮区看起来更紧凑或更高，transform: scale(1, 0.85) 是比硬调 height 更可控的方式——它缩放整个元素，包括文字和边框。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 必须加
transform-origin: top center+margin-top补偿位移，否则元素上浮错位 - 同步调大
font-size：比如原为14px，缩放 0.85 倍后建议设为16px来对齐视觉尺寸 - Chrome 120+ 会对缩放的表单控件报可访问性警告，Lighthouse 可能标红
- 不解决弹出菜单高度问题：点开后仍按系统默认行高渲染，只是“按钮区”变矮了
彻底自定义下拉（唯一能精确控高 + 控项高的路径）
当设计要求明确包含「固定最大高度 + 自定义行高 + 滚动条样式 + 键盘导航」时，绕过原生 select 是唯一可靠选择。核心是隐藏真实 select，用语义化结构模拟交互。
- 下拉容器（
ul）设max-height: 200px+overflow-y: auto，这才是真生效的限高 - 每项（
li）可自由设padding: 10px 12px、min-height: 44px、line-height: 1.4 - 必须保留原生
select在 DOM 中（position: absolute; opacity: 0; pointer-events: none;），并用 JS 同步值，否则表单提交失败 - 无障碍关键：
button加aria-expanded，ul加role="listbox"，每项加role="option"+aria-selected
真正容易被忽略的是：所谓“下拉高度”，从来不是单一 CSS 属性能解决的问题——它横跨了触发区样式、弹出层渲染、移动端热区、可访问性校验四个层面。选 size 就接受交互妥协，选自定义就得亲手处理焦点、键盘、触控、屏幕阅读器所有链路。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
