原生 select 下拉菜单高度无法用 css 的 max-height 或 height 控制，因其为脱离文档流的系统级组件；唯一跨浏览器有效的原生限高方案是使用 size 属性，如 size="5" 显示 5 行并自动滚动。
原生 select 的下拉弹出菜单高度无法用 max-height 或 height 控制——浏览器根本不认，你设了也白设。
为什么 max-height 和 height 对下拉弹层无效
下拉菜单是脱离文档流的系统级 UI 组件，由操作系统或浏览器底层绘制，CSS 无法穿透。你在 select 上写 max-height: 150px，只会影响顶部可点击区域的视觉高度；弹出来的列表该多高还是多高。Chrome、Edge、Safari 全都不支持对 option 列表设置 max-height 或 overflow；Firefox 虽有少量 UA 样式可干预，但行为不稳定、不跨平台。
常见错误现象包括：
- 加了
max-height后 Lighthouse 直接报“样式未生效” - 移动端（尤其是 iOS Safari）连
size属性都可能被无视，强制走全屏选择器 -
transform: scale()缩放select，弹出菜单仍按原始尺寸展开
唯一跨浏览器有效的原生方案：size 属性
size 是 HTML 原生属性，它告诉浏览器“默认展开显示几行选项”，浏览器据此计算弹出菜单的初始高度，并在超出时自动加滚动条。这是目前唯一无需 JS、所有主流浏览器一致支持的限高方式。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
-
size="5"：展开后最多显示 5 行，多余项需滚动查看 -
size="1"：等效于默认下拉（即隐藏列表），保持点击展开交互 - 注意：
size会改变渲染模式——size>1时，select变成类似textarea的多行控件，失去“点击展开”行为，适合固定展示场景
要保留点击展开 + 限高？只能用 div+ul 自定义
放弃 select，用语义化结构模拟，才能真正控制弹出层高度和样式：
- 父容器必须设
position: relative，下拉层（ul）用position: absolute+top: 100%定位，否则错位 - 下拉层设
max-height: 200px+overflow-y: auto，这才是真正生效的限高 - 必须监听外部点击、
Escape键关闭、ArrowDown/ArrowUp导航，否则可访问性不达标 - 别忘了
aria-expanded和aria-controls，否则屏幕阅读器无法识别状态 - 移动端要额外处理
touchstart和focus状态同步，iOS Safari 对focus触发极不敏感
对齐与视觉高度调优：别只盯着 height
想让 select 和 input 高度一致，关键不是单设 height，而是统一盒模型和渲染基线：
- 必须加
box-sizing: border-box，否则height不含border和padding - 加
appearance: none和-webkit-appearance: none移除系统箭头，再用 SVG 背景图补右对齐图标 - 用
flex容器包裹select和input，设align-items: center，比单个元素调参更稳 -
line-height对select无效，改用padding控制文字垂直居中（如padding: 8px 12px）
真正容易被忽略的是：即使你把所有 CSS 都写对了，iOS Safari 仍有最小触摸热区要求（约 44×44px），强行压小会导致点不中；Windows 高对比模式下，自定义下拉若没正确设置颜色和边框，可能直接不可见。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
