直接给 <option> 设 height 或 line-height 无效，因浏览器对 <option> 样式支持极弱，其渲染由操作系统或 UA 控制，CSS 无法穿透；唯一原生可控高度方案是 select 的 size 属性。
直接给 <option> 设 height 或 line-height 无效
浏览器对 <option> 元素的样式支持极弱，height、line-height、padding、margin 在 Chrome、Edge、Firefox 和所有移动端（尤其是 iOS Safari）中均被忽略。这不是写法问题，而是规范限制：选项渲染由操作系统或 UA 样式层接管，CSS 无法穿透。你写的样式连 warning 都不会触发，更不会生效。
- iOS Safari 强制最小触摸热区为 44×44px，强行压缩会导致点不中
- Firefox 某些旧版本看似响应
height，但升级后即失效，不可依赖 - 即使用
-webkit-appearance: none隐藏箭头，也完全不影响<option>渲染逻辑
size 属性是唯一原生可控的“行数+高度”方案
size 是 <select> 的 HTML 原生属性，它让下拉框以常驻列表形式显示固定行数，此时整体高度由“行数 × 浏览器默认行高”决定，且滚动行为稳定、聚焦正常。
-
<select size="4">→ 展开时固定显示 4 行，超出自动滚动 -
size="1"等效于默认单选下拉，但旧版 Safari 可能丢失箭头，慎用 -
size和multiple可共存，但加了multiple后视觉变为多选列表，不再是传统下拉箭头样式 - 移动端长列表建议
size≤ 6，避免 DOM 渲染过重
注意：size 值必须是数字字符串（如 "4"），不能带单位（"4px" 会失效）。
想统一视觉高度？用 padding + box-sizing 控制选中区
真正稳定、跨浏览器兼容的做法，是放弃控制弹出菜单本身，转而精确控制顶部“选中区”的视觉高度，并让文字垂直居中：
立即学习“前端免费学习笔记（深入）”；
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
-
padding: 10px 12px撑开上下空间，比height更可靠 - 必须配合
box-sizing: border-box，确保总高度包含边框和内边距 - 显式声明
font-size和font-family，避免继承塌陷 - 加
appearance: none（含-webkit-/-moz-前缀）隐藏原生箭头，再用背景图或伪元素自定义
示例：
select {
height: 40px;
box-sizing: border-box;
padding: 10px 12px;
font-size: 14px;
appearance: none;
background: url("data:image/svg+xml,...") no-repeat right 12px center / 16px;
}需要真正自由控制每项行高？必须放弃原生 <select>
当设计要求明确包含以下任一条件时，原生控件已到能力边界：
- 所有选项严格统一高度（如 48px 行高 + 图标 + 多行文本）
- 要求 hover 高亮、ArrowDown/Enter 键盘导航、Escape 收起
- 选项超过 20 项，需虚拟滚动或搜索过滤
- 必须适配高对比模式、屏幕阅读器、Windows Narrator
此时应采用语义化自定义结构：<div class="custom-select"><button></button><ul aria-expanded="false"><li role="option"></li></ul></div>，并用 JS 同步原生 <select> 的值。关键点包括：
-
<ul>上设max-height和overflow-y: auto，这才是真生效的限高 -
<li>可自由设padding、line-height、min-height - 必须监听外部点击、Escape、ArrowDown/Up、Enter，否则键盘和辅助技术不可用
- 原生
<select>不应移除，而应保留在 DOM 中（opacity: 0; position: absolute; pointer-events: none;），保证表单提交和可访问性
最易被忽略的是：很多人以为加了 transform: scale() 就能“调高”，结果在 Chrome 120+ 触发可访问性警告，iOS Safari 触摸热区变小，且弹出菜单仍按原始尺寸展开——这根本不是控高，只是视觉欺骗。
