原生 select 无法通过 CSS 限制下拉菜单高度，唯一跨浏览器有效的限高方式是使用 HTML 的 size 属性；若需“点击展开+限高”，必须用 div+button+ul 自定义实现。
直接改 height 或 max-height 基本没用
你给 select 元素加 height: 40px，只会影响顶部可点击区域的视觉高度；弹出来的下拉菜单（popup）由操作系统或浏览器底层绘制，CSS 完全穿透不了。Chrome、Edge、Safari 都无视 max-height 和 overflow，Lighthouse 会直接标“样式未生效”。line-height 对 select 本身也基本无效——它不是普通行内元素。
真正跨浏览器有效的原生方案只有 size 属性
size 是 HTML 原生属性，不是 CSS，它明确告诉浏览器“展开时显示几行选项”，浏览器据此渲染带滚动条的固定行数列表。这是唯一所有主流浏览器（含 iOS Safari）都一致支持的限高方式。
-
size="1"等效于默认下拉（隐藏列表，点击才展开） -
size="5"展开后最多显示 5 行，超出自动滚动 - 注意：
size会让select渲染成多行控件，失去“点击展开”交互，变成常驻列表
要保留点击展开 + 限高？只能自定义
如果必须维持“点击才弹出 + 弹出后有最大高度”，size 就不适用，原生 select 没有这个能力。你得用 div+button+ul 模拟：
- 外层容器设
position: relative，下拉层用position: absolute+max-height: 200px+overflow-y: auto - 必须手动实现键盘导航（
ArrowDown/Enter/Escape）和点击外部关闭 - 别漏掉
aria-expanded和aria-controls，否则无障碍支持直接崩
缩放方案能应急，但有硬伤
用 transform: scale(1, 0.8) 可以压扁整个 select，配合 transform-origin 和 margin-top 补偿位移，短期见效快。
- 问题在于：文字、边框、点击热区全被等比压缩，iOS Safari 要求触摸区 ≥ 44×44px，缩太小就点不中
- Chrome 120+ 开始对缩放后的表单元素报可访问性警告
- 不能解决弹出菜单高度问题，只是让顶部区域看起来“小一点”
最常被忽略的一点：无论选哪种方案，appearance: none 只能隐藏箭头，完全不影响下拉弹层的渲染逻辑——它依然是系统级黑盒。想真可控，就得接受放弃原生 select 的事实。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
