原生 select 的下拉菜单是脱离文档流的系统组件，height/max-height/line-height 均无效；唯一跨浏览器有效的限高方案是 HTML 的 size 属性；如需点击展开+精确控高，必须自定义下拉（div+ul），并完善可访问性与移动端适配。
为什么直接设 height 或 max-height 没用
因为原生 select 的下拉弹出层是脱离文档流的系统级组件，CSS 根本穿不透。你给 select 加 max-height: 200px，只会影响顶部可点击区域的高度，弹出来的菜单该多高还是多高——浏览器直接忽略这条样式，Lighthouse 甚至会报“未生效”。line-height 同样无效，option 元素本身几乎不响应任何 CSS 高度相关属性。
size 属性是唯一跨浏览器有效的原生方案
它不是 CSS，而是 HTML 原生属性，告诉浏览器“展开时默认显示几行选项”，浏览器据此渲染带滚动条的弹出菜单。这是目前唯一不用 JS、全平台一致支持的方式：
-
size="5"：展开后最多显示 5 行，超出自动出现垂直滚动条 -
size="1"等效于默认下拉行为（即隐藏列表，点击才展开） - 注意：
size会让select渲染成多行控件，失去“点击展开”交互，适合固定展示场景 - 移动端（尤其是 iOS Safari）可能无视
size，强制走全屏选择器
要保留点击展开 + 限高？只能自定义下拉
放弃 select，用 div+button+ul 模拟，才能真正控制弹出层高度：
- 父容器必须设
position: relative，下拉层用position: absolute; top: 100%定位 - 下拉层（
ul）设max-height: 200px; overflow-y: auto—— 这才是真生效的限高 - 必须监听外部点击、
Escape键、ArrowDown/Up导航，否则键盘和屏幕阅读器不可用 - 补上
aria-expanded和aria-controls，不然无障碍支持直接归零
对齐输入框高度时别只调 select
单靠改 select 的 height 很难和 input[type="text"] 对齐，根本原因是两者盒模型、内边距、字体渲染逻辑不同：
立即学习“前端免费学习笔记（深入）”；
- 必须统一设
box-sizing: border-box，否则height不包含border和padding - 加
appearance: none和-webkit-appearance: none剥掉系统外壳，再手动加背景箭头 - 最稳做法是把它们包进
display: flex容器，加align-items: center，并确保margin: 0 - iOS Safari 对触摸热区有最小尺寸要求（约 44×44px），强行压矮会导致点不中
select 的弹出层是黑盒。想真正可控，就得在 size 的妥协和自定义的投入之间做选择——前者省事但交互受限，后者自由但必须处理好可访问性和移动端降级。 
