给 select 直接设 height 基本没用，因其下拉菜单由系统/浏览器 ui 层独立绘制，css 无法穿透；唯一原生可控方案是使用 size 属性（如 size="4" 显示 4 行），真正精确控高需用 div+ul+js 自定义实现。
给 select 直接设 height 基本没用
浏览器把 select 当作原子控件：顶部选中区可能响应 height，但点击弹出的下拉菜单（popup）由系统或浏览器 UI 框架绘制，CSS 无法穿透。你在 Chrome 或 Edge 里写 height: 32px，往往只压扁了按钮区域，弹出菜单依然显示 8–10 行，行高、滚动、项数全不受控。
Firefox 稍友好些，Safari 则几乎无视；line-height 对 select 本身也基本无效。
用 size 属性控制可见选项行数
size 是 HTML 原生属性，它让 select 以“多行列表”形式展开（非点击弹出），此时高度由显示的选项数量决定，且可被 CSS 高度相关属性影响。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
-
<select size="4"></select>会强制显示 4 行option，哪怕只有 2 个选项，空白处也会留空 - 配合
max-height和overflow-y: auto可实现“固定容器高度 + 内部滚动”，但注意：此时select已脱离常规下拉交互逻辑，移动端体验差，且无障碍支持弱 - 别和
multiple混用——size在单选模式下才表现稳定；加了multiple后，部分安卓 WebView 会忽略size
真正可控的方案：自定义下拉（div+ul+JS）
如果必须精确控制整体高度、行高、滚动行为、键盘导航和缩放表现，原生 select 不是合适载体。轻量自定义才是可靠路径：
- 把
max-height和overflow-y: auto放在ul上，而不是外层容器——否则height: fit-content失效，菜单要么塌成一条线，要么不滚动 -
ul设height: 100%保证宽度继承和 flex 布局参与，li用padding+line-height控制单行高度（如line-height: 36px） - 必须加
aria-expanded、aria-controls和键盘事件（ArrowDown/Escape），否则 Lighthouse 会报严重可访问性问题 - iOS Safari 要求触摸热区 ≥ 44×44px，强行压缩
li高度可能导致点不中
慎用 transform: scale() 缩放整个 select
虽然 transform: scale(1, 0.8) 能视觉上“压扁”下拉框，但它同时缩放文字、边框、箭头和点击区域，带来一连串副作用：
- 需手动补偿位移（如
margin-top: 6px），不同字号/浏览器偏移量不一致 - Chrome 120+ 对缩放后的表单元素触发可访问性警告：“form elements not scalable”
- 高对比模式下，缩放可能使文字模糊或颜色丢失，且无法通过系统字体设置恢复
- 不能解决弹出菜单行高问题——它只是把原生 popup 也一起缩了，可读性反而下降
这不是“设高度”，而是绕过限制的视觉欺骗；一旦涉及表单验证、焦点管理或屏幕阅读器，就容易露馅。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
