size属性使select变为固定多行列表框而非下拉框:size=1为默认下拉,≥2时强制展开为滚动列表,失去点击展开行为;需配合multiple实现多选,css高度控制无效。

size 属性让 select 变成多行列表框,不是下拉框
设置 size 属性后,select 不再默认折叠为下拉样式,而是以固定行数的滚动列表形式展开。只要 size 值大于 1,就失去“点击展开”的行为,变成始终可见的列表框——这不是“转换”,而是语义和渲染模式的根本切换。
常见误解是以为 size="1" 还能保留下拉效果,其实:
-
size="1"在多数浏览器中仍显示为下拉(但已不推荐,应省略size) -
size="2"或更大时,强制展示至少 2 行选项,超出部分可滚动 - 若选项总数 ≤
size值,则全部可见、无滚动条
如何控制可见行数与实际选项数量的关系
size 决定的是“初始可见行高”,不约束选项总数。它影响的是 UI 占位和交互预期:
- 设
size="4"但只有 3 个option→ 全部显示,空白底边不出现滚动条 - 设
size="3"但有 10 个option→ 显示前 3 行,其余需滚动查看 - 设
size过大(如 100)→ 列表框高度撑满容器或触发页面溢出,需配合 CSS 限制最大高度
注意:size 是 HTML 属性,不能用百分比或 auto;只能是正整数。
与 multiple 搭配使用时的行为变化
单独用 size 时,用户仍只能单选(除非同时加 multiple):
-
<select size="5"></select>→ 单选列表框,空格/回车选中,方向键移动焦点 -
<select size="5" multiple></select>→ 多选列表框,支持 Ctrl/Cmd + 点击、Shift + 方向键等批量操作 - 没加
multiple时,即使size> 1,提交的仍是单个值(value最近一次选中的项)
错误写法:<select size="5" multiple></select> —— multiple 是布尔属性,存在即生效,写 false 无效。
CSS 覆盖 size 的高度限制很困难
size 会直接计算为行高 × 行数(通常每行约 1.2em),且优先级高于 height 或 min-height:
- 设置
style="height: 100px;"对size="5"的select基本无效 - 想精确控制高度?得用
max-height+overflow-y: auto配合size="1"(退回到下拉模式)或干脆放弃size,改用自定义下拉组件 - 移动端对
size支持不稳定,iOS Safari 可能忽略或强制转为原生选择器
真正需要灵活尺寸和样式时,size 就是妥协方案——它简单,但边界清晰:适合后台管理页、表单调试、或对视觉一致性要求不高的场景。
前端入门到VUE实战笔记:立即使用
在学习笔记中,你将探索 前端 的入门与实战技巧!











