size属性使select从下拉变为可见列表，设为大于1的整数时直接显示所有option，本质是切换为多行列表控件；常见失效原因包括size非正整数、css覆盖高度或未处理移动端兼容性。

size 属性让 select 从下拉变成可见列表

size 的作用不是“美化下拉框”，而是**彻底改变渲染行为**：设为大于 1 的整数后，select 就不再折叠，而是以多行列表形式直接显示所有 option，用户无需点击即可看到全部选项。这本质上是切换成了“多选列表控件”，哪怕 multiple 没开，也失去传统下拉交互逻辑。

设置 size 后为什么没生效？常见原因

最常踩的坑是忽略了浏览器默认样式和 DOM 状态：

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

• size 值必须是正整数（如 size="4"），size="0" 或空字符串会被忽略，退化为默认单行下拉
• 若同时设置了 multiple，size 控制可见行数；但若没设 multiple，size > 1 时仍允许单选，只是界面变列表——这点容易被误认为“不能选”
• 某些 CSS 重置库（如 normalize.css）或自定义样式可能覆盖了 select 的高度计算，导致实际显示行数少于 size 值，建议用 devtools 检查 computed height 和 line-height

size 和 multiple 的组合效果差异

二者控制不同维度，但协同影响交互语义：

• <select size="3"></select>：显示 3 行，单选，按方向键可上下移动焦点，回车确认——行为接近 <radio></radio> 列表
• <select size="3" multiple></select>：显示 3 行，支持 Ctrl/Cmd + 点击多选，或 Shift + 方向键连续选——这才是真正的列表式多选器
• size 值超过 option 总数时，多余行空白，不会自动缩高；想严格贴合内容高度，得用 JS 动态计算并设 size，或改用 div + aria-listbox 自定义实现

移动端适配和可访问性注意点

在 iOS Safari 和部分 Android 浏览器中，size > 1 的 select 可能触发原生选择器弹窗（尤其未设 multiple 时），破坏列表预期。更隐蔽的问题是：

• 屏幕阅读器对 size 列表的朗读逻辑不一致：有的读“列表，3 项”，有的只读当前聚焦项，缺乏明确“多选模式”提示
• 没有 multiple 时，键盘操作仅支持方向键+回车，无法用空格切换（这是 checkbox 的行为），容易造成操作困惑
• 如果业务上真需要类列表的单选体验，且要兼顾移动端和无障碍，select[size] 并非最优解——直接用 div 包裹 button 或 label + input[type=radio] 更可控

实际使用中，size 是个简单有效的视觉切换开关，但它不解决语义、兼容性或复杂交互需求。真正要稳定呈现“列表式单选/多选”，往往得绕过 select 原生限制。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！