size属性仅对select的列表式（multiple或size>1）生效，用于设定可见选项行数并显示滚动条；size=1或未设置时仍为下拉模式，无法控制下拉菜单高度，需自定义组件实现。
size 属性不能用于 <select> 的下拉式（默认）模式，只对列表式（multiple 或 size > 1）生效。 它的作用是让 <select> 以“多行列表”形式显示固定高度的选项区域，而不是点击才弹出的下拉菜单。
size 属性生效的前提条件
要让 size 生效，必须满足以下任一条件：
- 设置 size 属性值大于 1（如 size="4"），即使没有 multiple
- 同时设置了 multiple 属性（此时 size 控制可见行数，用户可按 Ctrl/Cmd 多选）
常见用法示例
✅ 正确：展示 4 行、单选的列表式选择器（非下拉）
<select size="4"><option>苹果</option>
<option>香蕉</option>
<option>橙子</option>
<option>葡萄</option>
<option>草莓</option>
</select>
✅ 正确：展示 3 行、支持多选的列表
立即学习“前端免费学习笔记（深入）”；
<select size="3" multiple><option value="a">选项 A</option>
<option value="b">选项 B</option>
<option value="c">选项 C</option>
<option value="d">选项 D</option>
</select>
❌ 无效：size="1" 或未设 size → 仍为传统下拉菜单，size 不起作用
size 与浏览器渲染的实际效果
size 值决定的是**可见选项行数**，不是最大可选项数。超出部分会出现垂直滚动条。
- size="3" 且有 5 个 <option> → 显示前 3 个，可滚动查看其余
- 若选项内容过长，文字可能被截断或换行（取决于 CSS line-height 和 padding）
- 移动端上，部分浏览器可能忽略 size，强制转为原生选择器（尤其 iOS Safari）
替代方案：想保持下拉样式但限制可见项数？
原生 <select> 的 size 无法控制下拉菜单展开后的高度——它只影响“列表式”外观。如需真正控制下拉弹层高度，需借助：
- CSS + 自定义下拉组件（如用 <div> 模拟）
- 第三方库（Select2、Choices.js 等）
- 配合 max-height + overflow-y: auto 的自定义 <datalist> 或 <details> 方案
