size属性不控制下拉弹出高度，仅切换渲染模式：size="1"为传统下拉菜单，≥2则变为常驻列表控件；其失效常见于非法值、父容器截断、移动端webkit忽略、未配multiple却期望多选；css无法控制原生弹层高度，需用缩放或自定义方案替代。
size属性根本不控制下拉框弹出时的高度
它只切换
为什么给select加size="5"却没效果
常见失效原因不是代码错，而是环境或逻辑踩坑：
-
size值非法：比如size="0"、size="-1"或空字符串，浏览器会静默忽略并回退到size="1" - 父容器设置了
overflow: hidden，或者某层max-height截断了内容，导致滚动条不可见或选项被裁切 - 移动端 Safari（包括微信、QQ 浏览器等 WebKit 内核）会强制忽略
size > 1，哪怕加了multiple也大概率降级为原生单行选择器 - 没配
multiple但期望多选：size="4"单独存在时仍是单选，只是界面变列表；Ctrl/Cmd 多选必须显式加multiple
想真正控制下拉弹层高度？别用size
height、max-height、overflow-y这些 CSS 对原生下拉弹层基本无效——因为弹出菜单不在 DOM 中，由系统 UI 绘制，CSS 无法穿透。Chrome/Edge 尤其严格，你调height: 40px可能只压扁顶部按钮区，弹出菜单依然显示 8–12 行。
可行路径只有两条：
- 轻量增强：用
transform: scale()缩放整个select，配合transform-origin和margin补偿位移（注意同步调整字体大小） - 彻底可控：隐藏原生
select（opacity: 0+position: absolute），用div+ul+li模拟，JS 控制显隐、键盘导航和滚动行为
size和multiple组合的真实语义差异
二者控制不同维度，但组合后交互逻辑完全不同：
-
<select size="4"></select>：单选，方向键上下切换 + 回车确认，行为接近 radio 列表；屏幕阅读器识别为“单选列表” -
<select size="4" multiple></select>：多选，支持 Ctrl/Cmd + 点击、Shift + 方向键连续选；屏幕阅读器更可能识别为“可多选列表” - size 值超过
option总数时，多余行留白，不会自动收缩；想贴合内容高度，得用 JS 动态计算再设size，或换自定义方案
最易被忽略的是：size 是语义开关，不是样式补丁。一旦设为 ≥2，它就不再是“下拉框”，而是一个 listbox —— 键盘焦点、Tab 顺序、可访问性标签全跟着变，这点在表单验证和无障碍测试里经常翻车。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
