唯一跨浏览器稳定控制原生select可见行数的方式是使用HTML的size属性，设size="5"即固定显示5行并自动添加滚动条；max-height和overflow对下拉弹层无效，因其由系统底层渲染，CSS无法干预。
用 size 属性控制原生 select 的可见行数
原生 select 元素无法通过 max-height 或 overflow 控制下拉弹出层的高度——那是个脱离 DOM 流、由系统或浏览器底层绘制的 UI 组件，CSS 对它基本无效。唯一跨浏览器稳定生效的方式，是使用 HTML 原生的 size 属性。
它不是“限制下拉高度”，而是让 select 切换为多行列表模式：设 size="5"，就固定显示 5 行选项，超出部分自动带滚动条；设 size="1"，就退化为默认点击展开样式（但此时已失去“限高”能力）。
-
size是 HTML 属性，不是 CSS，必须写在标签里：<select size="4"></select> - 它会改变渲染行为：元素不再表现为“按钮+弹层”，而是一个常驻的、可滚动的多行控件
- 移动端（尤其是 iOS Safari）可能忽略
size，强制走全屏选择器，这点无法规避 - 若需保持“点击展开”交互，
size就不适用，得换方案
为什么 max-height 和 overflow-y: auto 在 select 上完全没用
你给 select 写 style="max-height: 120px; overflow-y: auto;"，浏览器不会报错，但也不会生效。Lighthouse 甚至会标记该样式“未应用”。原因很直接：下拉菜单的渲染层和 select 元素本身不在同一上下文里。
常见错误现象包括：
立即学习“前端免费学习笔记（深入）”；
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
- 下拉展开后依然显示 10+ 行，根本不受
max-height约束 - 滚动条出现在
select框体上，但点开后弹出层仍满屏滚动 - Firefox 中尝试用 UA 伪类（如
::-moz-list-bullet）干预，行为不稳定且 Chrome/Safari 完全不认
这不是兼容性问题，是架构限制——你没法用 CSS 控制一个操作系统级弹窗。
需要“点击展开 + 限高”？只能用自定义下拉
如果业务要求必须是点击触发、弹出式、且高度可控（比如最多显示 6 行 + 滚动），那就得放弃原生 select，用 div + ul + JavaScript 重做。
关键实操点：
- 父容器加
position: relative，下拉层用position: absolute; top: 100%; width: 100% - 下拉层容器设
max-height: 180px; overflow-y: auto，这个才真正生效 - 必须手动处理焦点逻辑：用
tabindex="0"让触发按钮可聚焦，按Enter展开，方向键导航，Escape收起 - 移动端要监听
touchstart并preventDefault()，否则 300ms 延迟会导致点击失效 - 超过 30 项时，别只靠滚动——得加搜索过滤，否则性能和可访问性都会崩
容易被忽略的细节：size=1 不等于“默认下拉”
size="1" 看似还原了默认行为，但它实际禁用了多行模式，同时也不代表“弹出层高度受控”。它的作用只是让浏览器回退到最简渲染态，而弹出层高度仍由系统决定（通常 8–12 行）。如果你发现设了 size="1" 后下拉还是太长，这不是 bug，是预期行为。
真正想压低弹出层高度，只有两个路径：接受 size 带来的多行常驻形态，或者彻底接管 DOM。没有中间态。
