size属性使select变为始终可见的多行列表框，显示指定行数选项，非下拉展开；单独使用仍为单选，需配合multiple才支持多选；值为正整数，设为1或省略时恢复默认下拉样式。
select 的 size 属性到底起什么作用？
size 不是让下拉箭头“展开多行”，而是把 <select> 变成始终可见的多行列表框——它会直接显示指定数量的选项，不点开、不弹窗、没有下拉行为。这和 multiple 一起用才构成真正可多选的列表；单独设 size 时，仍是单选，只是界面形态变了。
-
size值必须是正整数（如size="4"），设为1或省略时才是默认下拉样式 - 浏览器不会自动滚动：如果选项总数超过
size，超出部分被截断，用户看不到（除非加multiple并配合 CSS 滚动） - 它不影响语义或表单提交逻辑，只改变渲染形态
为什么设了 size 却没看到多行？
常见原因就三个：
- 忘记写
size的值，比如写成<select size>（无效，浏览器当size="0"处理，退化为默认下拉） - 父容器或自身 CSS 设置了
height/max-height，强行压缩高度，盖住了多余行 - 选项太少：设
size="5"但只有 2 个<option>，自然只显示两行，留白不等于“多行效果”
检查时直接右键审查元素，看 computed 样式里 height 是否被意外覆盖，比猜更准。
size 和 multiple 搭配使用的实际效果
这是最常被误用的组合。单纯加 multiple 会让 <select> 默认以 size="4" 高度显示（各浏览器默认值略有差异），但加上显式 size 才能精确控制：
立即学习“前端免费学习笔记（深入）”；
-
<select size="3" multiple>：固定显示 3 行，支持 Ctrl/Cmd + 点击多选 -
<select size="1" multiple>：强制变回单行下拉样式，但依然支持多选（需按住 Ctrl 点击，视觉上毫无提示，极其反直觉，别这么干） -
<select size="6">（无multiple）：6 行高，只能点选一个，上下箭头键可切换焦点，Enter 确认
注意：iOS Safari 对 size 支持弱，可能无视该属性，回退到原生选择器；Android Chrome 一般正常。
替代方案：什么时候不该用 size？
size 是 HTML 原生控件的“老派”用法，现在多数场景更适合放弃它：
- 需要搜索过滤、分组、图标、虚拟滚动——
size无法扩展，得换<div>+ JS 实现的自定义下拉 - 要响应式适配小屏：固定
size在手机上往往撑出横向滚动条，或者内容被裁切 - 与现代 UI 库（如 React 的
react-select、Vue 的el-select）集成时，它们根本不读size，自己管渲染
原生 size 最适合内部工具、后台管理页这类对交互要求简单、兼容性优先、不追求美观的场景。一旦设计稿里出现“带搜索的多选下拉”，就别碰 size 了。
真实项目里，size 的坑不在语法，而在预期错位：以为它能增强下拉体验，结果发现它根本不是下拉。盯着需求想两秒——是要“展开时多行”，还是“一直多行展示”——再决定动不动这个属性。
