size属性使select放弃下拉行为，强制显示为可见的多行滚动列表框；值大于1时无下拉箭头，选项默认展开，仅当选项数超过size值时才出现滚动条。

size 属性让 select 变成多行列表框，不是下拉菜单

直接说结论：size 属性不会“把下拉菜单变成列表框”，而是让 select **放弃下拉行为、强制显示为可见的滚动列表框**。只要设置了 size 且值大于 1，浏览器就不再渲染下拉箭头，所有 option 默认展开显示指定行数。

设置 size 后为什么看不到滚动条？

常见错觉：设了 size="3"，但只有 2 个选项，结果没滚动条、也没填满高度——这是正常表现。滚动条只在选项总数超过 size 值时才出现。

• size="4" + 3 个 option → 全部可见，无滚动条，底部留白
• size="4" + 6 个 option → 显示前 4 行，右侧出现垂直滚动条
• 不设 size 或 size="1" → 恢复默认下拉行为（哪怕有 100 个选项）

size 和 multiple 要不要一起用？

可以一起用，但语义和交互完全不同：

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

• 只设 size="5" → 单选，用鼠标点击切换选中项（类似单选列表）
• 同时设 size="5" multiple → 多选，支持 Ctrl/Cmd 点击或 Shift 连选，视觉仍是 5 行高列表框
• 只设 multiple 不设 size → 浏览器按默认行数（通常是 2）渲染，体验差，务必显式设 size

注意：multiple 下按空格键无法全选，必须用鼠标或键盘方向键+空格逐个操作。

实际使用时容易忽略的细节

size 是 HTML 属性，不是 CSS，不能用 style="size: 5;"；它只接受正整数，设成 size="0" 或负数会被忽略，退化为 size="1"。

• 响应式场景下，size 值固定，小屏幕可能撑出横向滚动或截断文字，建议配合 max-width 和 overflow-wrap
• 移动端 Safari 对 size > 1 的 select 支持不稳定，部分版本仍会唤起原生选择器，测试时务必真机验证
• 无障碍方面，size 列表框的键盘导航逻辑和下拉不同：Tab 进入后，方向键直接移动焦点，Enter 不触发提交（除非绑定事件）

真正需要“下拉态可展开为列表”时，size 不是解法——得用 details/summary 或 JS 控制的自定义下拉组件。

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