size属性只控制select渲染模式而非下拉弹层高度：size=1为单行下拉，≥2则显示为常驻多行列表；限制弹层高度需用自定义组件或缩放方案。

size 属性不能限制下拉框“展开时”的高度——它根本不管下拉弹层，只决定 select 是否以常驻多行列表形式渲染。

size 属性控制的是渲染模式，不是弹出层高度

你点开下拉箭头后看到的菜单，是浏览器原生弹出面板，size 对它完全无效。设 size="5" 只会让 select 本身变成一个固定高、始终展开的 5 行列表（类似 Windows 的 ListBox），而不是让下拉菜单只显示 5 行。

• 想控制弹出层高度？别碰 size，用 CSS 的 max-height + overflow-y: auto 配合自定义下拉组件
• size="1" 或不写 size → 默认单行下拉按钮（这是唯一能触发弹出菜单的模式）
• size="2" 及以上 → 直接显示为多行列表，无点击、无弹窗、无下拉行为

为什么写了 size="4" 却没看到多行效果

常见失效不是代码写错，而是被其他因素覆盖或压制：

html-to-pptx-converter

使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。

下载

• 父容器或自身设置了 height / max-height，且值小于 size 所需高度，内容被截断
• CSS 中 overflow: hidden 父级把滚动条藏了，选项看不见也滚不了
• 移动端（尤其 iOS Safari）静默忽略 size > 1，强制回退到原生单行选择器
• 选项数少于 size 值，比如 size="6" 但只有 2 个 <option></option>，结果就是两行加大片留白

multiple 和 size 组合的真实作用

这两个属性控制不同维度，但组合后语义和交互会突变：

• <select size="4"></select>：单选，方向键上下切换焦点，Enter 确认，视觉上像 radio 列表
• <select size="4" multiple></select>：多选，支持 Ctrl/Cmd + 点击、Shift + 方向键连续选，屏幕阅读器识别为“可多选列表”
• <select size="1" multiple></select>：极其反直觉——仍是单行下拉外观，但底层支持多选（需按住 Ctrl 才能点多个），用户毫无提示，不要这么用

真正限制下拉弹层高度的可行路径

原生 select 的弹出菜单不受 CSS 尺寸控制，这是浏览器底层限制。如果必须限制展开高度，只有两个靠谱方向：

• 轻量增强：用 transform: scale(1, 0.7) 缩放整个 select 元素（含文字），再调 font-size 和 margin 补偿，仅影响可见区域，对弹层无效但视觉更紧凑
• 彻底接管：用 <div> + <code><button></button> + <ul></ul> 模拟下拉，通过 JS 控制显隐与滚动，此时 max-height、line-height、padding 全部自由可控；务必加上 aria-expanded 和键盘事件（ArrowDown/Escape/Enter）

  最常被忽略的一点：即使你用 appearance: none 去掉默认箭头，下拉弹层依然不可样式化——那部分永远游离在 CSS 之外。