原生的下拉面板由浏览器或系统控件渲染，css无法直接约束其高度；有效方案只有三种：用父容器限制可见区域并滚动、截断文本、或替换为自定义组件。
原生 <select></select> 的高度行为由浏览器控制，无法用 height 或 max-height 直接约束展开后的下拉面板；真正可干预的是容器布局和选项渲染表现。所有“让下拉变矮/变高/带滚动”的有效操作，都绕不开父容器、<option></option> 截断、或替换为自定义组件这三个层面。
为什么直接给 <select></select> 设 max-height 没用
浏览器对原生 <select></select> 的下拉弹出层（popup）采用独立于 DOM 流的渲染机制（常为 OS 级控件），CSS 样式几乎无法穿透。你在 <select></select> 上设置 max-height、overflow 或 height，只会影响其“输入框”部分的高度，对实际展开的选项列表毫无作用。
- Chrome / Edge 在 Windows 上调用系统 ComboBox 控件，样式完全不可控
- macOS Safari 使用原生 NSPopUpButton，同样屏蔽 CSS
- 移动端（iOS/Android）的弹出选择器更是全屏或半屏 modal，与页面 CSS 隔离
所以，任何试图“用纯 CSS 限制原生下拉高度”的方案，本质都是在控制它的**父容器**或**视觉替代层**。
用父容器限制可见区域并启用滚动
当选项很多、且你希望用户在不展开全屏弹窗的前提下快速浏览时，把 <select></select> 包进一个固定高度的容器，并让容器负责滚动，是最轻量的折中解法。
- 给包裹
<select></select>的<div class="select-wrapper"> 设置 <code>max-height: 200px和overflow-y: auto -
<select></select>本身保持默认样式，不设高度 - 确保
select-wrapper有明确宽度（如width: 100%），避免因缩放导致错位 - 注意：此方案仅在
size属性大于 1 时生效（即显示为多行列表框而非弹出菜单）；若size="1"，仍会触发原生弹出行为
示例：
<div class="select-wrapper"> <select size="5"><option>Option 1</option> <option>Option 2</option> <!-- ... many more --></select> </div>
CSS：
.select-wrapper {
max-height: 200px;
overflow-y: auto;
}
截断过长 <option></option> 文本防止宽度溢出
单个 <option></option> 内容过长，会导致整个下拉框被撑宽，破坏布局。虽然不能改下拉面板高度，但可以控制每项的视觉宽度。
- 仅对
<select></select>设置width不足以约束<option></option>—— 它们默认无视父级 width - 必须配合
white-space: nowrap+text-overflow: ellipsis+overflow: hidden，且需将<select></select>设为display: inline-block或block - 该样式在 Chrome/Firefox 中对
<option></option>有效，在 Safari 中支持有限（部分版本忽略） - 更稳妥的做法是服务端或 JS 预处理文本，截断后加
...，再注入<option></option>
关键 CSS：
select {
display: block;
width: 200px;
}
select option {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 200px;
}
需要完整高度控制？换掉原生 <select></select>
如果业务要求明确的高度上限、滚动条样式、键盘导航、搜索过滤，或要避免原生弹出层遮挡按钮（比如下方有 #confirmarBtn），就必须放弃原生 <select></select>。
- 用
<div> + <code><ul></ul>+<li>模拟下拉结构，把max-height和overflow-y: auto直接加在<ul></ul>上 —— 这样高度控制 100% 可靠 - 保留
<select></select>作为隐藏表单字段，同步选中值（确保表单提交和无障碍支持） - 使用
aria-expanded、aria-haspopup、role="listbox"等属性维持可访问性 - 避免用
position: absolute让下拉浮层脱离文档流 —— 否则容易盖住下方按钮，且无法触发平滑高度过渡动画
最易踩的坑是：以为“加了 max-height 就万事大吉”，却没意识到原生 <select></select> 的弹出层根本不受它影响。真正的控制权，永远在你能写 CSS 的那个 DOM 元素手上 —— 而它通常不是 <select></select> 本身。
