HTMLselect下拉显示行数设置技巧

HTML 的 `select` 元素 `size` 属性并非用于“美化下拉高度”，而是根本性地切换控件类型：`size="1"` 是传统点击展开的下拉菜单，而 `size≥2` 会强制变为始终展开、支持键盘导航的列表框（listbox），所有选项默认可见或带滚动条，单选逻辑不变；但这一行为在移动端 Safari（包括微信、QQ 内置浏览器）中被完全忽略，且极易因 CSS 重置（如 height、line-height 干预）导致显示异常；若追求“点击展开固定行数”的交互效果，原生 `select` 无法实现，必须依赖 JavaScript 动态切换 `size` 或选用成熟第三方选择器库——忽视其语义本质与跨端兼容限制，是前端开发中高频踩坑的根源。

size属性不是“调下拉高度”，而是切换控件类型

设 size="4" 后， 就不再是下拉菜单，而是一个固定行高的列表控件。它失去 click 展开行为，所有 默认可见（或带滚动条），键盘上下键直接切换焦点，屏幕阅读器识别为 listbox。即使没加 multiple，它仍是单选，提交逻辑与 size="1" 完全一致。

常见误操作是把它当“美化下拉框”用——比如想点一下才展开 5 行。这做不到。size 是声明式渲染模式切换，不是条件触发样式。

• size="1" 或不写：传统下拉，点击才展开，选项不可见时不在 tab 顺序中
• size="2" 及以上：始终展开，整块区域可 tab 进入，所有 参与键盘导航
• size="0"、空字符串或非正整数会被浏览器忽略，退化为 size="1"

为什么设置了size却只显示一行？

最常踩的坑是 CSS 覆盖了默认高度计算。比如 normalize.css 或自定义 reset 把 select 的 height、line-height 或 padding 改了，导致实际显示行数远少于 size 值。

打开 DevTools，检查该

的 computed height 和 line-height：若 height 不是 line-height × size 的整数倍，就会截断或撑不开。