原生 <select> 弹出菜单高度无法用 CSS 调整，因菜单由操作系统绘制、脱离 DOM；size 属性是唯一原生限高方式，但移动端可能失效；真要可控需自定义组件，兼顾样式、滚动、动画与无障碍。
原生 <select> 点击后弹出的菜单高度完全不能用 CSS 调整——这不是写法问题，是浏览器和操作系统的硬性限制。
为什么 height、max-height、line-height 全部失效
浏览器把 <select> 拆成两个独立部分：顶部可样式化的“选中区”（height 可能影响它），和底层脱离文档流、由操作系统绘制的“弹出菜单”。后者不在 DOM 中，不响应任何 CSS 高度相关属性。你在 DevTools 里看到 height: 40px 生效了，只是按钮区被压扁；点开后菜单依然按系统默认行高显示 8–12 行，滚动条位置、项数、高度全部不可控。
-
option标签本身对height、padding、line-height等全部静默忽略，Chrome/Safari/iOS/Android 无一例外 -
appearance: none只能隐藏箭头，不开放弹出层的样式控制权 - 给
<select>加max-height或overflow，Lighthouse 会直接报“未生效”，且在移动端毫无作用
size 属性是唯一原生可用的“展开高度”控制方式
size 不是 CSS，而是 HTML 原生属性，它让 <select> 改为常驻列表模式（非点击弹出），此时“可见行数”才真正可控。
-
size="4"→ 展开后固定显示 4 行，超出自动出现垂直滚动条 - 必须配合
multiple才支持多选，但提交值仍是数组（后端需适配） - 移动端（尤其 iOS Safari）可能无视
size，强制走全屏选择器，交互逻辑也变了——不再是“点击展开”，而是始终展开 - 无法实现“点击后渐变展开 + 限高 + 推挤下方内容”的动画效果
真要控制点击展开后的高度，只能自定义下拉组件
放弃 <select>，用 <div> + <button> + <ul> 模拟，才能真正控制弹出层高度、滚动、行高和动画。
立即学习“前端免费学习笔记（深入）”；
- 下拉容器（
<ul>）设max-height: 240px+overflow-y: auto，这个高度才真正生效 - 每项（
<li>）可自由设height、padding、line-height，文字垂直居中用display: flex; align-items: center最稳 - 父容器必须是
position: relative，下拉层用position: absolute; top: 100%定位，否则高度变化不会推挤下方元素 - 必须补全
aria-expanded、role="listbox"、role="option"和键盘事件（ArrowDown/Escape），否则屏幕阅读器不可用 - iOS 要求触控热区 ≥ 44×44px，别把自定义按钮缩太小，否则点不中
最常被忽略的一点：所谓“点击展开高度”，本质是两件事——顶部触发区的视觉高度（前端可控），和弹出菜单的实际渲染高度（系统级不可控）。想统一它们，就得接受自定义组件带来的开发成本和无障碍维护责任。
