size属性使select变为固定高度多行列表框，而非下拉式控件；值≥2时显示对应行数选项并支持滚动，但不改变单选逻辑，且无法限制下拉弹出层高度。
size 属性只控制可见行数，不改变选择逻辑
设置 size 后，<select> 会变成“多行列表框”（类似 <textarea> 的滚动视图），但它**不是下拉式**——点击就展开全部选项的交互消失了。用户看到的是固定高度的滚动区域，必须手动拖动或用方向键浏览。这和带 size="1"（默认）时的下拉行为完全不同。
常见误解是以为 size="5" 能让下拉菜单最多显示 5 行再滚动，实际做不到。浏览器原生 <select> 没有“下拉时限制可见项数”的属性。
-
size值为 1 时：渲染为传统下拉（除非显式设multiple） -
size≥ 2 时：强制变为多行列表框，失去下拉动画和聚焦展开行为 - 即使没设
multiple，size> 1 也会允许单击直接选中（无需按住 Ctrl）
想实现“下拉时最多显示 N 项”，只能靠自定义组件
原生 <select> 不支持该需求。主流方案是用 <div> + <ul> 模拟下拉，配合 JS 控制展开高度或最大渲染项数。例如：
<div class="custom-select">
<button aria-haspopup="listbox">请选择</button>
<ul class="dropdown-list" style="max-height: 200px; overflow-y: auto;">
<li role="option">选项1</li>
<li role="option">选项2</li>
<!-- ... 最多渲染 5 项，其余需滚动 -->
</ul>
</div>关键点：
立即学习“前端免费学习笔记（深入）”；
- 用
max-height+overflow-y: auto限制可视区域，而非依赖size - 需手动处理键盘导航（
ArrowDown/Enter）、焦点管理、ARIA 属性（aria-expanded,aria-activedescendant） - 移动端需额外适配触摸事件和虚拟键盘遮挡问题
用 size="1" + CSS 无法可靠限制下拉高度
有人尝试给 <select size="1"> 加 style="max-height: 100px;" 或覆盖 appearance，但无效。因为下拉面板是操作系统级 UI（Chrome/Edge 用 OS 原生控件，Firefox 略有差异），CSS 几乎无法干预其尺寸和滚动行为。
实测表现：
- Chrome：下拉面板高度完全由选项数量和系统字体决定，CSS
max-height无作用 - Safari：部分版本允许用
-webkit-appearance: none配合自定义箭头，但仍不能控制下拉高度 - 所有浏览器均不响应
select { height }对下拉面板的影响
兼容性与无障碍注意事项
如果坚持用原生 <select size="N">（N > 1），要注意：
- 屏幕阅读器会将其读作“列表框”而非“组合框”，语义不同，影响辅助技术用户的操作预期
- 某些旧版 IE 对
size渲染异常（如文字截断、滚动条错位） - 移动端 Safari 在
size> 1 时可能触发全屏选择器，失去自定义样式控制 - 若同时设
multiple和size，必须确保size≥ 2，否则multiple会被忽略
真正要限制下拉可见项数，就得放弃原生 select，接受自定义实现带来的开发成本和测试负担——尤其是焦点流、键盘操作、高对比度模式适配这些细节，很容易被忽略。
