原生下拉菜单高度无法像素级控制，因其弹出层由系统ui绘制、css完全失效；可用size属性近似控制或改用自定义+结构实现真正精确控制。
原生 <select></select> 无法按像素精确控制下拉菜单高度——这不是 CSS 写得不够细，而是浏览器和操作系统根本不允许你触达弹出层的渲染逻辑。
为什么height、max-height和line-height都无效
浏览器把 <select></select> 拆成两个独立部分：<select></select> 顶部的“选中区”（CSS 可部分干预），和脱离 DOM、由系统 UI 层绘制的“弹出菜单”（CSS 完全失效）。你设 height: 40px，只压扁了按钮区；点开后菜单仍按系统默认行高显示 8–12 行，max-height 被忽略，line-height 对 <option></option> 标签根本不起作用。
- Chrome/Edge：弹出层高度固定，
height仅影响外框视觉尺寸 - Firefox：极少数旧版本有微弱响应，但行为不一致，不可依赖
- iOS Safari：强制最小触摸热区为 44×44px，硬缩到 32px 就点不中
用size属性实现“近似像素控制”（原生最稳方案）
size 是 HTML 原生属性，它让 <select></select> 以常驻列表形式展开，并固定显示指定行数。此时高度 = 行数 × 浏览器默认行高（通常约 24–28px），可反推并微调：
- 设
size="5"→ 约 120–140px 高（5 × 24–28px），超出自动滚动 - 搭配
padding和font-size可小幅修正整体高度，比如padding: 6px 12px+font-size: 14px - 注意：
size="1"不等于默认下拉行为，某些 Safari 版本会丢失箭头 - 移动端可能无视
size，强制走全屏选择器
真正像素级可控：自定义<div>+<ul>结构
<p>这是唯一能自由设定下拉容器高度（如 <code>max-height: 192px）、单行高度（如 height: 48px）、滚动行为和动画的路径：
-
<ul></ul> 上设 max-height: 192px + overflow-y: auto，高度完全自主
- 每个
<li> 可设 height: 48px、padding: 12px 16px、line-height: 1.2，全部生效
- 必须保留原生
<select></select> 在 DOM 中（position: absolute; opacity: 0; pointer-events: none;），同步更新其 value
- 键盘导航需监听
ArrowDown/Enter/Escape，否则屏幕阅读器无法使用
- iOS Safari 要求触控热区 ≥ 44×44px，自定义按钮不能小于该尺寸
别碰的“伪精确”方案
<ul></ul> 上设 max-height: 192px + overflow-y: auto，高度完全自主<li> 可设 height: 48px、padding: 12px 16px、line-height: 1.2，全部生效<select></select> 在 DOM 中（position: absolute; opacity: 0; pointer-events: none;），同步更新其 value
ArrowDown/Enter/Escape，否则屏幕阅读器无法使用有些做法看似能调高度，实则埋雷：
-
transform: scale(1, 0.75)：缩放整个元素，但 Chrome 120+ 会报可访问性警告，文字需手动放大补偿，且不解决弹出层本身高度问题 - 给
<option></option>加height或padding：所有主流浏览器均忽略，纯属白写 - 在父容器上设
max-height+overflow: hidden：对原生<select></select>无效，弹出层仍溢出 -
appearance: none后以为能自由控制：它只隐藏箭头，不影响弹出菜单渲染逻辑
所谓“像素精确”，本质是接受一个事实：原生 <select></select> 的弹出层是黑盒。你要的是确定性，那就得放弃它——不是因为难，而是浏览器没给你这个接口。
