size属性控制select可见行数，而非height样式；size="1"为单行下拉，size≥2时显示多行列表，搭配multiple可明确多选上下文，CSS height对弹出菜单无效。
用 size 属性控制原生 <select> 的可见行数
原生 <select> 的“高度”不能靠 height CSS 属性可靠控制，浏览器对弹出菜单部分的渲染是系统级的，CSS 无法穿透。真正起效的是 HTML 的 size 属性——它直接告诉浏览器“默认显示几行选项”。
常见错误是写 style="height: 40px;" 或 style="line-height: 40px;"，结果发现：顶部选中区被压扁了，点击展开后菜单依然挤成小字、滚动条突兀、聚焦框错位。
-
size="1"：单行下拉（默认行为），只显示当前选中项 + 箭头 -
size="4"：强制展开为 4 行列表，不点开也能看到 4 个<option> - 搭配
multiple时，size更关键——否则用户根本看不到可多选的上下文 - 若未设
size，多数浏览器默认显示 2 行，实际可用空间极小
为什么 height CSS 在 <select> 上基本无效
这不是你写错了，是浏览器故意限制。Chrome、Edge（Chromium 内核）、Safari 都把 <select> 当作“黑盒控件”：顶部可点击区域可能响应 height，但弹出菜单的行高、总高度、滚动逻辑完全由操作系统 UI 框架决定，CSS 无权干预。
你看到的“好像 height 生效了”，往往是 padding + border + font-size 共同撑开的视觉错觉，而弹层内容仍按系统默认排布——比如 Windows 下每项固定 24px 行高，Mac 下更紧凑，且不随你的 CSS 变化。
立即学习“前端免费学习笔记（深入）”；
- Firefox 相对宽松，
height对可见区影响稍明显，但仍不能控制弹出菜单 -
appearance: none可隐藏原生箭头并重绘外框，但弹出层照旧不可控 - 想用
max-height+overflow-y: auto？对原生<select>无效，这些样式只作用于容器，不作用于弹层
需要自定义高度和滚动行为？得换方案
如果你明确需要：固定最大高度（如 200px）、内容超长时平滑滚动、支持键盘导航、适配移动端触摸，那就必须放弃原生 <select>，改用语义化组合：<div> + <ul> + <li> + JavaScript 控制显隐与选中状态。
这种方案下，高度完全由 CSS 掌控：
- 父容器设
position: relative，下拉层用position: absolute+top: 100% - 下拉列表（
<ul>）加max-height: 200px和overflow-y: auto - 避免在父容器上设
height或min-height，否则会破坏内容自适应 - 务必补全 ARIA 属性（如
aria-expanded、role="listbox"）以保障可访问性
容易被忽略的关键点
很多人卡在“为什么我设了 size="5" 还是只看到 2 行”，其实是因为：父容器有 overflow: hidden，或者外层 <div> 设了固定 height 且不够高，把多出来的行裁掉了。
另外，size 是 HTML 属性，不是 CSS，不能用媒体查询动态切换；如果要做响应式（比如小屏变 size="1"），必须用 JS 切换属性值，或干脆走自定义下拉路线。
