原生的下拉面板高度无法用css控制，因其实为系统级组件；唯一原生可控方案是size属性（如size="5"），而精确限高需js自定义+组件并设max-height与overflow-y: auto。
下拉列表 <select></select> 的高度无法直接用 height 控制
浏览器对 <select></select> 元素的渲染高度（尤其是展开后的下拉面板）有严格限制，height、max-height 等 CSS 属性对下拉选项区域基本无效。你看到的“下拉高度”其实是操作系统或浏览器原生控件决定的，CSS 只能影响外层容器或聚焦态边框等表层样式。
<select></select> 展开后最多显示几项？由 size 属性控制
真正能影响下拉可见项数的，是 HTML 原生的 size 属性——它让 <select></select> 以多行列表形式呈现，而非默认的单行下拉。此时 CSS 的 height 才会起作用。
-
size="1"：恢复为默认下拉行为（忽略height） -
size="5"：强制显示 5 行选项，此时可配合height微调整体容器高 - 若选项不足
size指定数量，空白区域仍会保留 - 该方式在移动端可能被忽略，部分 iOS Safari 会强制回退为原生选择器
想自定义下拉高度？必须替换为 JavaScript 模拟组件
要完全控制展开区域的高度、滚动、搜索、样式，就得放弃原生 <select></select>，改用 <div> + <code><ul></ul> + JS 实现。主流方案包括：
- 使用
select2、choices.js或tom-select等轻量库，它们通过dropdownParent、maxDropdownHeight等配置项直接控制下拉层高度 - 手动实现时，给下拉容器设置
max-height: 200px+overflow-y: auto即可生效 - 注意焦点管理与键盘导航（
ArrowUp/ArrowDown、Enter），否则可访问性会出问题 - 原生
<select></select>的required、form validation不会自动继承，需手动同步值到隐藏<input>
为什么 appearance: none 加 padding 不能解决下拉高度？
appearance: none 只能隐藏原生下拉箭头和部分边框，但展开行为、弹出位置、选项渲染逻辑仍由浏览器控制。加 padding 或 line-height 可能撑高单行选择框本身，但对下拉面板毫无影响——它压根不走这个盒模型流。
常见误操作：select { height: 40px; } select option { height: 40px; } —— option 的 height 在绝大多数浏览器中被忽略，仅 Firefox 部分支持，且不改变下拉面板总高度。
真要调高度，要么接受 size 的粗粒度控制，要么彻底换掉原生元素。没有中间路线。
