height对原生无效，因浏览器将其拆分为CSS可控的“选中区”和系统级绘制的“弹出菜单”，后者不响应height、line-height等样式；唯一跨浏览器稳定方案是用父容器max-height+overflow-y控制弹出菜单高度。
height 对原生 <select></select> 无效，别白费劲设它——你调的只是顶部可点击区域，弹出菜单完全不受控。
为什么 height 在 <select></select> 上基本没用
浏览器把 <select></select> 拆成两块：上面是能被 CSS 影响的“选中区”，下面是操作系统级绘制的“弹出菜单”。后者不响应 height、line-height、padding，甚至 appearance: none 也穿不透。
- Chrome/Edge 中设
height: 32px，可能只压扁按钮，弹出菜单仍显示 8–10 行 - Firefox 偶尔让
padding推动视觉高度，但行高和滚动行为依旧固定 - Safari 和 iOS 最保守，
height几乎完全被忽略 - 强行缩放（如
transform: scale(1, 0.7)）会触发 Chrome 120+ 的可访问性警告，Lighthouse 直接报错
真正有效的容器高度限制：用 max-height + overflow-y
不碰 <select></select> 本身，改它的父容器。这是唯一跨浏览器稳定生效的方式。
- 给包裹
<select></select>的<div> 加 <code>max-height: 200px和overflow-y: auto - 确保该容器是
<select></select>展开时实际渲染的“弹出区域”的父级（不是 DOM 上层的布局容器） - 注意：这个滚动条控制的是弹出菜单内容区，不是
<select></select>标签本身 - 移动端需额外加
-webkit-appearance: none防 Safari 忽略容器约束
.select-container {
max-height: 200px;
overflow-y: auto;
}
截断过长选项文本：仅对 <option></option> 有效
<option></option> 支持有限 CSS，但 text-overflow: ellipsis 在部分浏览器（Chrome/Firefox 桌面端）可生效，前提是满足三个条件：
立即学习“前端免费学习笔记（深入）”；
- 必须设
display: block（默认是inline，但多数浏览器强制覆盖） - 必须有明确宽度（如
width: 200px）或父容器white-space: nowrap - 必须配合
overflow: hidden和text-overflow: ellipsis - iOS Safari 和旧版 Edge 完全不支持，别依赖它做核心体验
select option {
display: block;
width: 200px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
彻底可控的方案：放弃原生 <select></select>
当需要统一高度、键盘导航、省略号、无障碍支持时，<select></select> 就是技术债源头。用 <div> + <code><button></button> + <ul></ul> 模拟是最稳妥路径。
- 所有尺寸（
max-height、line-height、padding）完全自由 - 必须手动实现
ArrowDown/Escape键盘逻辑，否则残缺 - 必须加
aria-expanded和aria-controls，否则屏幕阅读器不可用 - iOS 触摸热区不能小于 44×44px，硬缩到 24px 就点不中
复杂点不在代码量，而在交互细节的补全——漏掉一个键盘事件或一个 ARIA 属性，就等于没做。
