select 的 height 和 line-height 无效，因其为替换元素：上部按钮区受部分 CSS 影响，下拉菜单属操作系统级 UI，CSS 无法穿透；可靠方案是用 padding + box-sizing: border-box 控制选中区视觉高度。
height 在 select 上不生效，不是你写错了，是浏览器根本不会让它生效——它只控制顶部按钮区的“视觉厚度”，对点开后的弹出菜单零影响。
为什么height和line-height都无效
因为 select 是替换元素（replaced element），浏览器把它拆成两块：上面那个可点击的“选中区”能被部分 CSS 影响，下面弹出来的菜单是操作系统级 UI（Windows 用 ComboBox，macOS 用 NSPopUpButton，iOS 用全屏 picker），压根不在 DOM 里，CSS 穿不透。
- 设
height: 40px，只会让按钮区变扁，文字可能挤到顶部甚至被截断 - 设
line-height: 40px，浏览器直接忽略，option标签完全不受控 - 给
option加padding、height或font-size，全部静默失败 -
appearance: none只能隐藏箭头，对弹出层样式毫无作用
真正能统一视觉高度的轻量方案
不改交互、不引入 JS 库，只靠 CSS 微调“看起来等高”的可靠路径：
- 用
padding+box-sizing: border-box控制选中区：比如padding: 10px 12px，文字基本垂直居中；必须加box-sizing: border-box，否则边框和内边距会额外撑高 - 配合固定
font-size（如14px）和border（如1px solid #ccc），多处下拉框视觉体量才一致 - Firefox 对
padding响应最稳；Safari iOS 可能略压缩，但比瞎调height可靠得多 - 别碰
transform: scale()：虽然能“压矮”按钮区，但 Chrome 120+ 会报可访问性警告，且缩放后文字渲染模糊、移动端热区可能低于 44×44px 导致点不中
想限制弹出菜单显示行数？用size属性
这是唯一被所有浏览器一致支持的原生限高方式，但它会改变渲染形态：
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
立即学习“前端免费学习笔记（深入）”；
-
<select size="5"></select>强制展开显示 5 行选项，超出自动滚动条——注意这不是“下拉弹窗”，而是类似多行文本框的固定列表 -
size="1"等效于默认单选下拉行为，但此时size不起作用 - 移动端（尤其 iOS Safari）可能无视
size，强制走全屏选择器，不能依赖它做精确布局 - 如果必须保留“点击展开”交互，
size就不适用，得换方案
要真正控制下拉菜单高度，只能放弃select
当你需要：max-height 精确限制展开高度、每项固定 32px 行高、键盘导航（ArrowDown/Enter）、搜索过滤、或适配高对比模式/读屏器——原生方案已到极限。
- 结构用
<div class="custom-select"> <button></button><ul role="listbox"></ul> </div>，<select></select>隐藏但保留用于表单提交和降级 -
<ul></ul>上设max-height: 200px+overflow-y: auto，这才是真正生效的限高 - 必须同步
value和selectedOptions，否则框架绑定或表单提交会失效 - 漏掉
aria-expanded、aria-activedescendant或键盘事件监听，Windows 高对比模式和 VoiceOver 下直接不可用
最常被忽略的点：所谓“下拉高度”，其实是两个独立系统在各自渲染——你调的只是前端可见部分，而用户点开后看到的，由操作系统说了算。强行用 CSS 统一，代价是兼容性、可访问性、移动端体验三重降级。
