select 的 size 属性控制可见行数而非下拉高度：size=1 为默认下拉，≥2 时变为固定展开的多行列表；移动端常退化为单行，CSS height 等无效，精确控制弹出菜单需自定义组件。
select 的 size 属性控制可见行数，不是“下拉高度”
HTML 元素的 size 属性作用是让下拉框**以多行列表形式展开显示（即“非下拉式”）**，而不是控制点击后弹出菜单的高度。一旦设置了 size，它就不再是传统意义的“下拉框”，而变成一个始终展开的滚动列表框——这和用户直觉里的“调大小”容易混淆。
常见错误现象：
– 设置了 size="5" 但点击后还是只显示一行，且没反应 → 实际是浏览器忽略了该属性，因为 size 只对没有 multiple 且未设 size="1" 的情况生效；
– 用 CSS 的 height 强行撑开 → 大部分浏览器不响应，或仅影响外框、不改变选项可视区域。
-
size值为1（默认）时，表现为标准下拉选择器 -
size≥2时，强制显示为多行列表，不折叠，支持滚动 - 若同时设置
multiple，size决定初始可见行数，且可多选 - 移动端 Safari / Android Chrome 对
size > 1支持较弱，常退化为原生单选下拉
如何真正让下拉菜单显示更多选项（点击后）
原生 的弹出菜单高度由浏览器控制，无法通过 HTML 或标准 CSS 直接设定。所谓“显示多行列表”，只有两种可行路径：
- 放弃原生
，改用基于+- 用
size+multiple模拟（适合表单中允许多选、且能接受非下拉视觉的场景）例如，要让用户一眼看到 5 个选项并可单选，又不想引入 JS 库，可用这个折中方案：
立即学习“前端免费学习笔记（深入）”；
注意：此时它已不是“下拉”，而是固定展开的列表；提交行为仍与单选一致（除非加了
multiple）。兼容性与移动端的现实限制
size属性在桌面端 Chrome/Firefox/Edge 基本可靠，但在 iOS Safari 中，只要size > 1，系统会直接忽略并渲染为原生单行下拉控件——这是 WebKit 的硬性限制，无法绕过。- Android WebView 行为类似，取决于底层 Chromium 版本，低版本可能完全不支持
size - 无障碍（a11y）方面：
size > 1的仍被屏幕阅读器识别为listbox，语义正确 - 如果必须保证“点击后弹出高菜单”，唯一稳定方式是 JS 自定义下拉，并用
position: absolute+max-height+overflow-y: auto控制
为什么不要给 select 加 height 或 line-height
对
设置height、min-height、line-height等 CSS，在多数浏览器中只会撑大容器边框，不会增加选项可视数量，甚至导致文字截断或错位。典型失效示例：
select { height: 200px; /* 无效 */ line-height: 30px; /* 无效 */ font-size: 14px; }真正起效的样式只有：
-
width：控制整体宽度（有效） -
font-size/padding：间接影响单行高度（但不改变size行数） -
appearance: none+ 自定义箭头：仅用于美化，不影响展开逻辑
想精确控制“弹出菜单”的尺寸，就得承认：原生
不提供该能力，这不是写法问题，是规范限制。 - 用
