size属性改变的是select的渲染模式与语义：设为1或不写即单行下拉；≥2则变为常展多行列表控件，影响键盘操作、焦点及屏幕阅读器识别。
size属性到底改的是什么
它不改“下拉弹出时的高度”，而是直接切换 select 的渲染模式：设为 size="1" 或不写，就是传统单行下拉按钮；设为 size="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"></select>：单选，方向键上下切换 + 回车确认，行为接近 radio 列表；不支持空格键切换，也不提示多选能力 -
<select size="4" multiple></select>：多选，支持 Ctrl/Cmd + 点击、Shift + 方向键连续选；屏幕阅读器更可能识别为“可多选列表” - 未设
size但写了multiple→ 浏览器通常按默认高度（如 2–3 行）渲染，不可靠，应始终配size -
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 真机时，这个属性最容易成为线上问题的隐形推手。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
