size属性控制select的渲染模式：值为1或省略时为下拉式，≥2时变为固定高度多行列表控件，语义和交互行为均改变。
select 的 size 属性到底控制什么
它不控制“下拉弹出时的高度”，而是直接切换 select 的渲染模式：设为 1（或不写）就是传统下拉；设为 2 或更大，就变成一个固定高度、始终展开的多行列表控件——选项全部可见（或带滚动条），不再需要点击展开。
这本质是语义变更，不是样式微调。浏览器会把 size="4" 的 select 当作 listbox 处理，键盘操作、焦点行为、屏幕阅读器识别都随之改变。
为什么写了 size="5" 却还是只显示一行
常见失效原因不是代码写错，而是环境或逻辑踩坑：
-
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">：单选，方向键上下切换 + 回车确认，行为接近 radio 列表；无空格键切换，不提示多选能力 -
<select size="4" multiple>：多选，支持 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 真机时，这个属性最容易成为线上问题的隐形推手。
