select 的 height 无法控制弹出菜单高度，因其由系统绘制且与可见部分分离；可行方案为缩放（transform）或自定义 DOM 结构，需兼顾可访问性与触摸适配。
select 元素无法通过 height 实现真正一致的高度控制——你调的只是顶部选中区，弹出菜单的行高、项数、滚动行为完全不受影响。强行设 height 只会让视觉和交互脱节，比如顶部被压扁，点开后却弹出 10 行默认高度的选项。
为什么height对select基本无效
浏览器把 select 当作“原子控件”：可见部分（可样式化）和弹出菜单（系统级 UI 绘制）是两个独立渲染层。CSS 无法穿透到后者。
-
height: 40px可能只缩窄了按钮区域，但弹出菜单仍按操作系统默认行高（通常 22–28px）显示，且项数由内容决定 -
line-height对select本身几乎无作用，尤其在 Chrome/Edge 中会被忽略 -
appearance: none能隐藏箭头，但不解除对弹出层的样式限制 - iOS Safari 强制最小触摸热区（约 44×44px），硬设小高度会导致点击失灵
轻量可行的两种方案
不引入重型组件库，也能获得可控、一致的视觉高度：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
-
缩放方案（适合简单适配）：用
transform: scale(1, 0.8)压缩整个select，配合transform-origin: top center和margin-top补偿位移。注意同步调整font-size，否则文字会模糊；zoom已淘汰，别用 -
模拟方案（真正可控）：用
div+button+ul重构。此时max-height、line-height、padding全部自由。关键不能漏：aria-expanded、aria-controls、外部点击关闭、ArrowDown/Escape键盘支持
自定义下拉菜单必须检查的兼容性雷区
即使 DOM 结构和 CSS 都写对了，以下三点仍常导致线上翻车：
立即学习“前端免费学习笔记（深入）”；
- Windows 高对比模式下，若没显式设置
color、background、border，自定义菜单可能完全透明不可见 - Chrome 120+ 对
transform缩放后的表单元素触发可访问性警告（Lighthouse 报 “form elements not scalable”），影响审计分 - 移动端需预留足够触摸面积（建议 ≥44px），不能只看视觉尺寸——用
min-height+padding代替纯height
真正“一致高度”的目标，不是让所有 select 看起来一样高，而是让用户在任何设备、任何辅助工具下，都能以相同方式展开、浏览、选择。原生控件的限制恰恰提醒你：当一致性成为刚需，就得主动放弃它。
