height和line-height对select无效，因其为替换元素，仅padding+box-sizing: border-box可稳定控制选中区高度；size属性是唯一原生限高方案；精确控制需用div+button+ul重写并完善语义与交互。
为什么height和line-height对select完全无效
浏览器把select当成“替换元素”，内部拆成两块：顶部可样式化的选中区（按钮区），和底层由操作系统绘制的弹出菜单。你写的height: 40px只可能压扁前者；而点开后的菜单根本不在 DOM 中，CSS 完全穿不透。所有对option设height、line-height、padding的操作都会静默失败——不是你写错了，是浏览器直接忽略。
padding + box-sizing: border-box是唯一稳定控制选中区高度的方式
想让多个下拉框视觉上等高、文字居中、边框协调，别碰line-height，直接用内边距撑开：
-
padding: 10px 12px是常用起点，文字基本垂直居中 - 必须加
box-sizing: border-box，否则border和padding会额外增加总高度 - 配合
font-size: 14px和border: 1px solid #ccc，能快速统一多处下拉框的视觉体量 - Firefox 对
padding响应最一致；Safari 在 iOS 上可能略压缩，但比height可靠得多
size属性是唯一原生可控的“展开高度”方案
它不是 CSS，而是 HTML 属性，告诉浏览器“展开时默认显示几行选项”。这是目前唯一不用 JS、全平台一致支持的限高方式：
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
-
size="5"：展开后最多显示 5 行，超出自动出现垂直滚动条 -
size="1"等效于默认单选行为（即点击才展开） - 注意：
size会让select渲染成多行控件，失去“点击展开”交互，适合固定展示场景 - 移动端（尤其是 iOS Safari）可能无视
size，强制走全屏选择器
真要精确控制整体高度？必须放弃select，用div+button+ul重写
一旦你开始尝试transform: scale()缩放、或给父容器加max-height，就说明你已经踩进兼容性雷区了。真正可控的路径只有一条：
立即学习“前端免费学习笔记（深入）”；
- 结构用
<div class="custom-select"> <button>...</button><ul>...</ul> </div> -
<ul></ul>上设max-height: 200px和overflow-y: auto——这才是真生效的限高 - 必须同步维护原生
select的状态（value / selectedOptions），否则表单提交失效 - 补全
role="listbox"、每个li加role="option"和aria-selected，否则读屏器无法识别 - iOS Safari 要求触控热区 ≥ 44×44px，自定义按钮不能硬缩到 28px，否则点不中
所谓“样式不生效”，本质是你在跟一个系统黑盒较劲。接受这个事实，再决定是妥协用size，还是投入精力做语义化自定义——后者难的不是代码，是键盘导航、焦点管理、移动端降级这些细节没人提醒你漏掉。
