因为select是“两段式”控件：顶部可点击区部分受css影响，而弹出菜单由系统ui绘制、css完全失效；height仅作用于按钮区，不控制弹出层高度、行高或可见行数。
给 select 加 height 为什么经常没用？
因为浏览器把 select 当作一个“两段式”控件：顶部可点击区域（部分受 CSS 影响），和独立弹出的下拉菜单（由系统 UI 绘制，CSS 完全失效）。你在 select 上写 height: 40px，可能只压扁了按钮区，点开后菜单依然按默认行高显示 8–10 行，滚动条位置、项间距、最大可见行数全不受控。
Chrome / Edge（Chromium 内核）最典型：高度样式对弹出层零影响；Firefox 略宽松但也不稳定；Safari 和 iOS 则几乎完全无视。
常见错误现象包括：
- 加了
height后文字被截断或上下错位 - 弹出菜单高度没变，但顶部区域变形导致点击热区偏移
- 在移动端（尤其 iOS）点不中，因 Safari 强制最小触摸尺寸为 44×44px
size 属性是唯一原生支持固定可见行数的方式
size 是 select 的 HTML 属性，它不控制整体容器高度，而是直接指定“展开状态下默认显示几行选项”。这是 W3C 规范明确支持、跨浏览器一致的行为。
使用场景：后台管理列表筛选、表单中需预览多个选项但又不想依赖 JS 的轻量场景。
关键点：
-
<select size="4"></select>会强制展开并显示 4 行option，超出部分自动滚动 - 它绕过了弹出菜单机制，本质是把下拉框渲染成类似
textarea的多行选择器 - 仍支持键盘导航（ArrowUp/Down）、
Enter确认、Escape关闭 - 与
multiple可共存，但语义变为“多选 + 固定视口”，非传统下拉体验 - 不兼容
required（因为用户未“展开”时也能看到默认选中项，校验逻辑易混乱）
真正可控的方案：自定义下拉（div + ul + JS）
如果你需要精确控制弹出层高度、滚动行为、项间距、甚至支持搜索或分组，必须放弃原生 select，用语义化结构模拟。
核心结构示例：
<div class="custom-select" role="combobox" aria-expanded="false">
<button aria-haspopup="listbox" aria-controls="dropdown-list">请选择</button>
<ul id="dropdown-list" role="listbox" tabindex="-1">
<li role="option" aria-selected="false">选项1</li>
<li role="option" aria-selected="true">选项2</li>
</ul>
</div>
关键控制点：
- 给
ul设max-height: 200px+overflow-y: auto，而非父容器 —— 这样内容少时自然收缩，多时才滚动 - 避免在
.custom-select上设height或overflow，否则会干扰fit-content行为 - 用
transform: scaleY(0)+transition控制展开动画，比 height 动画更稳定 - 移动端需监听
touchstart并阻止默认行为，防止 Safari 滚动穿透
别踩这些坑：缩放、无障碍、高对比模式
用 transform: scale() “骗过”高度限制看似简单，但实际埋雷密集：
- Chrome 120+ 对缩放后的表单元素触发 Lighthouse 可访问性警告：
Form elements must have a unique and accessible name，且屏幕阅读器可能读不出缩放后的内容 - iOS Safari 在高对比模式下，若自定义箭头用背景图实现，而没配
color和background-color，整个下拉将不可见 -
appearance: none只能隐藏原生箭头，无法干预弹出层样式 —— 你删了箭头，菜单还是老样子 - 用
zoom（仅 IE/旧 Safari）已彻底淘汰，现代项目禁止使用
真正难的不是让下拉“看起来矮一点”，而是保证它在各种系统设置、辅助技术、小屏设备上都可操作、可感知、可提交。原生 select 的限制，本质是浏览器在可访问性与渲染隔离之间划的底线 —— 越想绕过它，越要补足它放弃的那部分责任。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
