size属性在现代浏览器中几乎不生效，因为它仅对multiple或size>1的非下拉式列表框有效；当为单选下拉（默认size=1）时，浏览器按规范忽略size值，无法控制展开高度。
为什么 size 属性在现代浏览器中几乎不生效
因为 <select></select> 的 size 属性只对 非下拉式（即 multiple 或 size > 1）的列表框 起作用；一旦没设 multiple 且 size=1（默认），浏览器就强制渲染为下拉箭头样式，此时 size 完全被忽略。你调 size="5" 却只看到一行？不是写错了，是浏览器按规范“故意无视”。
size 只在 multiple 模式下才真实控制高度
只有加上 multiple 属性，size 才会决定可见选项行数，且表现为多选列表框（带滚动条、无下拉箭头）。常见误用是想“让下拉菜单展开得高一点”，但这是两个完全不同的控件形态。
-
<select size="4" multiple></select>→ 显示 4 行可滚动多选框 -
<select size="4"></select>→ 等价于<select></select>，仍为单选下拉，size被丢弃 - 若需视觉上“展开高”，必须用 JS + CSS 模拟下拉，原生
<select></select>不支持
替代方案：用 CSS 控制下拉展开区高度（仅限部分浏览器）
Chrome / Edge 从 v120+ 开始支持 ::-webkit-scrollbar 和 max-height 配合 appearance: none 对原生下拉面板做有限干预，但无法精确控制行数，且 Firefox/Safari 完全不支持。实际能做的只有：
- 给
<select></select>自身设height或min-height（只影响控件按钮高度） - 用
appearance: none隐藏原生箭头，再用伪元素画自定义按钮 - 监听
focus后用 JS 动态插入一个<div> 模拟下拉面板，并设 <code>max-height和overflow-y: auto - 主流 UI 库（如 Element Plus、Ant Design）的
Select组件底层就是这么干的 -
<input list>+<datalist></datalist>：支持自动补全，但无法限制可见行数，且不支持多选 - 用
<div contenteditable="false"> 模拟触发区，配合绝对定位的 <code><ul></ul>列表，每项用<li>，通过max-height+overflow-y: auto控制滚动区域高度 - 关键点：列表容器必须设
position: absolute，并手动计算 top/left，否则会破坏文档流 - 无障碍需补全
aria-expanded、aria-controls和键盘导航（↑↓/Enter/Escape）
真正可控的行数方案：放弃原生 <select></select>，改用 <datalist></datalist> 或自定义组件
如果业务要求“点击后展开固定显示 6 行选项”，原生 <select></select> 就不是合适工具。更现实的选择是：
原生 size 是个历史遗留属性，它描述的是“列表框”而非“下拉菜单”。想控制下拉展开后的视觉行数，就得接受——那已经不是 <select></select> 的职责范围了。
