原生 select 的 max-height 无效，因下拉层脱离文档流且为系统级 ui；唯一跨浏览器限高方案是 html 的 size 属性；需模拟下拉时须处理定位、收起逻辑与无障碍。
原生 select 的 max-height 为什么完全无效
因为浏览器把下拉弹出层当作系统级 UI 组件绘制，它脱离文档流，CSS 根本无法穿透控制。你在 select 上写 max-height: 150px，只会影响顶部可点击区域的视觉高度，弹出来的菜单该多高还是多高——Chrome、Edge、Safari 全部无视，Firefox 即使部分响应也极不稳定。
size 属性是唯一跨浏览器生效的原生限高方案
它不是 CSS，而是 HTML 原生属性，直接告诉浏览器“展开时显示几行选项”，浏览器据此计算弹出菜单初始高度并自动加滚动条。这是目前唯一无需 JS、不依赖 UA 样式、所有主流浏览器一致支持的方式。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
-
size="5"：展开后最多显示 5 行，超出需滚动；size="1"等效于默认下拉（即隐藏列表） - 注意：
size会强制select渲染为多行控件，失去“点击展开”交互，变成类似textarea的固定展开态 - iOS Safari 可能忽略
size，强制走全屏选择器，移动端慎用
要保留“点击展开”又限高？必须放弃 select，用 div+button+ul 模拟
核心不是“怎么写”，而是绕开三个关键限制：定位错位、点击收起逻辑失效、无障碍缺失。
- 父容器必须设
position: relative，否则ul用position: absolute会相对视口错位 - 下拉层用
max-height: 200px; overflow-y: auto控制高度，top: 100%对齐按钮底部 - 收起不能只靠
blur——监听document.addEventListener('click')，检查e.target是否在下拉区域外 - 必须加
aria-expanded和aria-controls，下拉项加tabindex="0"，支持键盘ArrowDown/Enter/Escape
容易被忽略的兼容性雷区
即使样式看起来正常，这些点一踩就崩：
- iOS Safari 触摸热区有最小尺寸要求（约 44×44px），强行缩小
button高度会导致点不中 - Windows 高对比模式下，自定义下拉若没显式设置
color/background/border，可能整个不可见 - Chrome 120+ 对
transform: scale()缩放后的表单元素触发更严的可访问性警告，Lighthouse 直接报form elements not sc - 移动端
touchstart必须调用e.preventDefault()，否则 300ms 延迟导致菜单闪退
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
