size属性控制select的渲染模式：值为1或省略时为下拉式，≥2时变为固定高度多行列表控件，语义和交互行为均改变。

select 的 size 属性到底控制什么

它不控制“下拉弹出时的高度”，而是直接切换 select 的渲染模式：设为 1（或不写）就是传统下拉；设为 2 或更大，就变成一个固定高度、始终展开的多行列表控件——选项全部可见（或带滚动条），不再需要点击展开。

这本质是语义变更，不是样式微调。浏览器会把 size="4" 的 select 当作 listbox 处理，键盘操作、焦点行为、屏幕阅读器识别都随之改变。

为什么写了 size="5" 却还是只显示一行

常见失效原因不是代码写错，而是环境或逻辑踩坑：

Doc To HTML

使用 MinerU 文档处理引擎将 Word 文档（.doc、.docx）转换为保留结构和格式的干净 HTML。

下载

• size 值非法：写成 size="0"、size="-2" 或空字符串，浏览器会忽略并回退到默认 1
• CSS 干扰：父容器设置了 overflow: hidden，或多层嵌套中某处 max-height / height 截断了内容
• 移动端 Safari 强制降级：iOS 及所有 WebKit 内核浏览器（微信、QQ 浏览器等）会静默忽略 size > 1，哪怕加了 multiple 也大概率回退为原生单行下拉
• 没配 multiple 但期望多选：size="4" 单独存在时仍为单选，只是界面变列表；若想支持 Ctrl/Cmd 多选，必须显式加 multiple

size 和 multiple 组合的真实效果差异

二者控制不同维度，但组合后交互语义完全不同：

• <select size="4"></select>：单选，方向键上下切换 + 回车确认，行为接近 radio 列表；无空格键切换，不提示多选能力
• <select size="4" multiple></select>：多选，支持 Ctrl/Cmd + 点击、Shift + 方向键连续选；屏幕阅读器更可能识别为“可多选列表”
• size 值超过 option 总数时，多余行留白，不会自动收缩高度；想贴合内容，得用 JS 动态算行数再设 size，或换 div + aria-listbox 实现

动态改 size 实现“点击展开”要防哪些坑

用 JS 在 focus/blur 时切 size 是常见折中方案，但实际容易翻车：

• iOS Safari 的 blur 事件不可靠，常不触发；建议加 touchend 监听，或用 setTimeout 延迟还原 size
• 在 DOMContentLoaded 前操作 DOM，select 元素可能尚未挂载，赋值无效
• Chrome/Safari 对 size="2" 渲染不稳定，尤其配合缩放字体时，容易出现截断或空白行；推荐从 3 起设
• 别指望它模拟原生“下拉动画”——size 切换是硬切换，没有过渡，视觉突兀；真要平滑展开，得放弃原生 select

真正麻烦的从来不是怎么写 size="4"，而是你写了之后，不知道它在哪台设备上悄悄失效了。尤其是当产品要上线、测试覆盖不到 iOS 真机时，这个属性最容易成为线上问题的隐形推手。