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