原生select下拉菜单高度无法用CSS的height、max-height等属性控制，因其弹出层是脱离DOM的操作系统级组件；唯一跨浏览器有效的原生方案是使用size属性（需配合multiple），但会改变交互模式；如需单选+限高，必须用div+ul自定义下拉组件。
下拉列表 <select> 的高度根本不能用 CSS 直接控制
浏览器对 <select> 的渲染高度（尤其是展开后的下拉面板）有强限制，height、max-height、line-height 对下拉菜单本身基本无效。你看到的“下拉高度”其实是操作系统级控件或浏览器内置 UI 的行为，CSS 只能影响未展开时的 <select> 元素自身高度。
size 属性只对 multiple 有效，且不适用于单选下拉
给 <select> 加 size="5" 确实能显示 5 行选项，但这是强制变成多选列表框（multiple 模式），用户可以 Ctrl+Click 多选，且默认不带下拉箭头。如果你要的是单选 + 可控展开项数，这条路走不通。
-
<select size="4">→ 显示 4 行，但失去原生下拉交互逻辑 - 加
multiple后，size才生效；不加multiple时，size被忽略 - 移动端 Safari 和部分 Android 浏览器会直接忽略
size，仍以原生弹窗形式展开
真正可控的方案：用 JS + 自定义下拉组件替代原生 <select>
想精确控制展开高度、滚动条、项数、键盘导航、焦点管理，必须放弃原生 <select>，用 <div> + <ul> + <input> 模拟。核心要点：
- 用
aria-expanded、aria-haspopup、role="combobox"保无障碍支持 - 下拉容器设固定
max-height+overflow-y: auto，例如max-height: 200px - 监听
click/keydown控制展开/收起，避免用focus触发（易误触发） - 禁用原生
<select>的显示（display: none或visibility: hidden），仅用它做表单数据回传
示例关键 CSS：
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
立即学习“前端免费学习笔记（深入）”；
.custom-select-dropdown {
max-height: 180px;
overflow-y: auto;
border: 1px solid #ccc;
}
为什么不要强行 hack 原生 <select>
有人尝试用 transform: scale()、zoom、覆盖 ::-webkit-scrollbar 等方式“骗过”浏览器，结果是：
- Chrome/Firefox/Safari 表现完全不一致，iOS 上几乎全部失效
- 缩放后文字模糊、焦点错位、键盘导航（上下键）失效
- 屏幕阅读器无法识别选项，违反 WCAG 2.1
- 表单提交时值丢失或类型错误（比如返回字符串而非 number）
原生 <select> 的下拉区域不在 DOM 树里，JS 无法访问、无法绑定事件、无法插入样式节点——这才是最硬的限制。
