原生 <select> 下拉面板高度无法用 CSS 控制，因其弹出菜单是操作系统级组件、不在 DOM 中；仅 <select multiple> 模式下通过 size 属性可实现固定行数滚动，真正可控方案需 JS 自定义下拉。
原生 <select> 的下拉面板高度无法用 CSS 控制，所谓“限制高度”实际只能作用于 <select> 元素自身（即多选模式下的滚动列表），或其父容器（仅影响布局，不改变弹出菜单）。真要稳定控制展开后的选项区高度和滚动行为，必须放弃原生下拉逻辑。
为什么 max-height 和 overflow-y 对原生下拉无效
Chrome / Edge / Firefox 中，点击 <select> 后弹出的下拉菜单是操作系统级 UI 组件，不在 DOM 树中，也不受页面 CSS 影响。你在开发者工具里看到的 <select> 只是个触发器。
-
select { max-height: 200px; overflow-y: auto }完全无效——它既不裁剪弹出菜单，也不加滚动条 -
-webkit-appearance: none只能隐藏默认箭头，无法接管下拉面板渲染 - Windows 上通常最多显示 10–12 项，超出自动加滚动条；macOS 表现更不可控，且无统一策略
- 试图用
transform或position: absolute强行定位弹出层，大概率失败或触发浏览器兼容性降级
<select multiple> 是唯一原生可滚动的方案，但有硬约束
加 multiple 属性后，<select> 会变成固定高度的滚动列表（不再是“下拉”），此时 CSS 才真正生效。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 必须显式设置
size属性，例如<select multiple size="6">，否则多数浏览器默认只显示 2 行，用户看不到全部选项 -
size值决定可见行数，不是像素高度；若选项文本过长，内容仍可能溢出容器宽度 - 移动端（尤其 iOS）基本忽略
multiple，直接当单选处理，无法按住 Ctrl/Cmd 多选 - 取值不能用
select.value，得遍历select.selectedOptions或检查每个option.selected
真正可控的方案：JS 自定义下拉（非模拟按钮+弹层）
如果你需要搜索、键盘导航、焦点管理、固定高度 + 滚动、响应式适配，或者只是不想让用户被系统菜单策略绑架，就得用 JS 实现。
立即学习“前端免费学习笔记（深入）”；
- 核心思路：用
opacity: 0+position: absolute隐藏原生<select>，再用<div class="custom-select">模拟触发按钮，点击时显示<ul class="dropdown-list"> - 关键控制点：
.dropdown-list { max-height: 200px; overflow-y: auto; }—— 这个才真正起效 - 必须同步维护原生
<select>的状态（value / selectedOptions），否则表单提交或框架绑定会失效 - 推荐轻量库：tom-select（支持搜索/分组/远程加载）、Choices.js（专注多选）、or just vanilla JS if you only need height + scroll
最容易被忽略的一点：很多人以为“给父容器加 max-height + overflow-y: auto”就能解决下拉高度问题，其实那只影响容器自身布局，对弹出菜单零作用。真正的滚动控制权，永远在 JS 渲染的 DOM 节点手里。
