原生 select 的下拉弹出菜单高度无法通过 CSS 的 height 或 max-height 控制，因其由系统控件独立渲染；唯一原生有效方案是使用 size 属性（如 size="4"）实现固定行数列表显示，否则须用自定义组件模拟并完善可访问性。
原生 select 的 height 属性无法控制下拉弹出菜单的高度，这是浏览器和操作系统的底层限制，不是 CSS 写得不够细。
为什么直接设 height 或 max-height 没用
浏览器把 select 拆成两部分：顶部“选中区”（CSS 可部分干预）和独立绘制的“下拉弹出层”（脱离 DOM、由系统控件渲染）。你写的 height: 40px 只可能压扁按钮区；点开后菜单仍按系统默认高度显示 6–10 行，max-height、line-height、padding 对 option 全无效。Chrome 和 Edge 尤其明显，iOS Safari 甚至会忽略所有样式干预。
唯一可靠的原生方案：size 属性
size 是 HTML 原生属性，它让 select 以常驻列表形式显示指定行数，此时高度由行数 × 浏览器默认行高决定，滚动行为稳定且无需 JS：
-
size="4"→ 展开时固定显示 4 行选项，超出自动出现原生滚动条 -
size="1"等效于默认下拉行为（但某些旧版 Safari 可能丢失箭头） - 搭配
multiple可实现多选列表，但语义仍是单值提交，除非后端明确接收数组 - 缺点：失去“点击展开”交互，UI 风格突变；移动端（尤其 iOS）可能强制走全屏选择器
想保留下拉样式又限高？必须自定义组件
放弃原生 select，用 div + button + ul + li 模拟，才能真正控制弹出层高度：
立即学习“前端免费学习笔记（深入）”；
- 下拉容器（
ul）设max-height: 200px+overflow-y: auto，这才是真生效的限高 - 每项（
li）可自由设padding、line-height、min-height，完全可控 - 必须同步处理：外部点击收起、
Escape键关闭、ArrowDown/Up导航、Enter确认 - 无障碍关键：保留原生
select在 DOM 中（position: absolute; opacity: 0; pointer-events: none;），并同步更新其value，补全aria-expanded、aria-controls、role="listbox"和每个li的role="option"
别在 transform: scale() 上浪费时间
有人用 transform: scaleY(0.8) 缩放整个 select 来“看起来更矮”，但这只是视觉欺骗：
- 弹出菜单高度依然不变，仅按钮区被压缩
- 缩放会连带缩小文字和边框，必须手动调大
font-size补偿，且不同浏览器渲染清晰度不一致 - Chrome 120+ 会报 “form elements not scalable” 可访问性警告
- iOS Safari 要求触控热区 ≥ 44×44px，缩放后极易点不中
真正需要精确控制下拉高度时，核心不是“怎么改 CSS”，而是接受一个事实：原生 select 的弹出层是黑盒。要么用 size 接受交互妥协，要么投入自定义组件——后者自由度高，但可访问性和移动端适配细节一个都不能漏。
