直接设置 select 的 height 通常无效，因浏览器对下拉弹出面板高度有强约束；唯一可靠控制可见选项数的方式是使用原生 size 属性，如 size="4" 可显示 4 行选项。
直接设置 select 的 height 通常无效
浏览器对 select 元素的渲染有强约束，尤其在 Chrome、Edge 等 Blink/WebKit 内核中：height CSS 属性常被忽略或仅影响外框，不改变下拉弹出面板（dropdown popup）的高度。你看到的“下拉列表变高”，其实只是选中项的行高或边框变化，真正展开后的选项区域仍由系统控件控制，无法用纯 CSS 调整其可见项数或滚动高度。
真正能控制“可见选项数量”的只有 size 属性
size 是 select 的原生 HTML 属性，它让 select 以多行列表形式呈现（非下拉式），此时可直观控制显示几行选项：
<select size="4"> <option>苹果</option> <option>香蕉</option> <option>橙子</option> <option>葡萄</option> <option>草莓</option> </select>
-
size="1"等价于默认下拉行为（但此时 CSSheight仍可能被忽略） -
size="5"会强制显示 5 行选项，带原生滚动条（无需 JS） - 该方式兼容所有现代浏览器，且无障碍支持良好
- 缺点：失去传统下拉箭头交互，UI 风格突变
想保留下拉样式又控制展开高度？只能换方案
原生 select 的弹出层完全脱离 DOM，无法用 CSS 选中或限制其高度。可行路径只有两个：
- 用 JavaScript +
<div>+<ul>重写一个下拉组件（如基于aria-expanded和键盘导航），再用max-height+overflow-y: auto控制面板高度 - 使用成熟 UI 库（如
Choices.js、TomSelect或框架配套组件），它们把选项渲染为真实 DOM 节点，可自由加样式 - 注意：任何自定义下拉都需手动处理焦点管理、ESC 关闭、上下键导航、屏幕阅读器标签等，否则可访问性会严重受损
别踩这些坑
有人试过给 select 加 line-height、padding 或 transform: scale() 来“撑开”下拉面板——这些操作只影响输入框区域，对弹出层零作用。还有人试图用 ::-webkit-scrollbar 伪元素去改下拉滚动条，同样无效，因为那个弹出层根本不在当前文档流里。
立即学习“前端免费学习笔记（深入）”；
如果你的场景必须保持原生 select，又要求用户一眼看到更多选项，size 是唯一可靠选择；否则，接受重写组件的事实，别在 CSS 上反复试探。
