唯一可靠方式是设置 size 属性，它直接指定默认显示行数，超出自动滚动；height、max-height、line-height 等 CSS 属性对 select[multiple] 无效，且移动端支持不稳定。
用 size 属性控制多选下拉的可见行数
原生 <select multiple> 的高度不能靠 height 或 max-height 控制，唯一可靠方式是设置 size 属性。它直接告诉浏览器“默认显示几行选项”，超出自动滚动，且所有现代浏览器都支持。
常见错误现象包括：给 select[multiple] 加 height: 200px，结果只压扁了顶部边框区域，点开后还是默认展开 10+ 行；或加 line-height 到 option 上，完全无反应。
-
size="4"表示始终显示 4 行选项（含滚动条），不点击也能看到内容 -
size和multiple必须共存才生效，单独size在单选模式下可能被忽略或行为异常 - 移动端（尤其是 iOS Safari）对
size支持不稳定，可能强制转为全屏选择器，需实测 - 不要设过大的
size值（如 >8），否则长列表渲染卡顿，且在小屏上溢出不可控
appearance: none + padding 微调选中区视觉高度
虽然 size 控制的是整体列表高度，但你仍可通过 CSS 调整顶部可交互区域的视觉高度，让多选框和旁边输入框对齐更自然。关键不是改 height，而是用 padding 配合 box-sizing: border-box。
注意：这仅影响“未展开时”的容器高度，不影响弹出菜单——但 <select multiple> 本来就没有弹出菜单，所以这个调整是真正生效的。
立即学习“前端免费学习笔记（深入）”；
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 写法：
select[multiple] { height: 40px; box-sizing: border-box; padding: 8px 12px; } - 必须加
appearance: none隐藏原生多选箭头（实际是复选框图标），否则 padding 会导致图标错位 - 避免在
option上设样式，包括padding、height、line-height，全部无效 - 若需自定义复选框样式，只能用伪元素覆盖（需配合
position: relative和::before），但无法改变系统复选状态的渲染逻辑
为什么不能用 max-height 限制多选下拉高度
max-height 对 <select multiple> 完全无效——不是写法问题，是浏览器根本不解析该属性作用于该元素。你设了 max-height: 150px，开发者工具里能看到样式被标记为 “invalid” 或 “not applied”。
根本原因：select[multiple] 是替换元素，其内部选项区域由 UA 样式控制，CSS 无法穿透。所谓“高度”，其实是 size × 每行默认高度（通常 20–24px）的乘积，而这个每行高度浏览器不暴露给 CSS。
- 试图用
transform: scale(1, 0.8)压缩整体高度？会同步压缩文字和复选框，可读性下降，Lighthouse 报 “form elements not scalable” - 给父容器加
overflow: hidden？只会裁剪掉底部选项，用户无法滚动查看，且破坏表单语义 - 移动端热区要求 ≥ 44×44px，硬缩到 32px 高度可能导致点不中复选框，尤其在 iOS 上
真正需要精确高度控制时，别用原生 select[multiple]
如果你的需求包含以下任意一条，原生方案已到极限：固定最大高度（如严格 180px）、统一行高（如每项 36px 含图标）、hover 高亮、键盘导航（Tab/ArrowDown）、搜索过滤、虚拟滚动（>50 项）。
此时应放弃 select[multiple]，改用 <div class="multi-select"><button></button><ul aria-multiselectable="true"></ul></div> 结构，再用 JS 同步值并管理焦点。
-
<ul>上设max-height: 180px; overflow-y: auto;，高度真正可控 - 每个
<li>可自由设padding、min-height、display: flex，图标和文字垂直居中稳定 - 必须手动处理：点击
li切换aria-selected、Enter确认、Escape关闭、Tab跳出 - 原生
select保留在 DOM 中（position: absolute; opacity: 0; pointer-events: none;），确保表单提交和验证逻辑不变
size 是最快落地的方案；但只要设计稿明确写了“最大高度 200px，每项带图标和两行文本”，就别在原生标签上浪费时间——那不是限制高度的问题，是渲染模型的边界。 
