元素不响应height、line-height等css布局属性，因其为操作系统控制的替换元素；唯一可靠方案是改用自定义下拉组件。
给 <option></option> 设 height 无效，别白试了
<option></option> 元素在所有主流浏览器中都不响应 height、line-height、padding 等布局属性。你写 option { height: 40px; }，浏览器会直接忽略。这是因为 <option></option> 是替换元素（replaced element），其渲染由操作系统或浏览器 UI 框架控制，CSS 无法穿透。
常见错误现象：
- 开发者在 DevTools 里看到样式被“划掉”，误以为是优先级问题，反复加
!important - 在 Firefox 中看似生效（某些旧版本允许有限 height），但一换 Chrome 或 iOS Safari 就失效
- 用 JS 动态插入
<option></option>后再设样式，依然无效
真正能影响“选项视觉高度”的只有两种方式
不是调 <option></option>，而是通过外围控制间接影响用户感知的高度：
- 对
<select></select>设置padding：比如padding: 10px 12px;，撑开选中区高度，让文字垂直居中，这是最稳定、兼容性最好的方式 - 用
size属性强制显示多行：如<select size="5"></select>，此时下拉区变成固定高度列表（非弹出式），每项高度由 UA 决定，但整体可见行数可控；注意这会改变交互形态（失去点击展开行为） - 设置
max-height+overflow-y: auto在父容器上：适用于自定义下拉组件（<div>+<ul>），此时每个 <code><li>的height完全自由
为什么 appearance: none 也救不了 <option></option>
appearance: none 只能隐藏原生箭头、暴露 <select></select> 的可样式化部分（即选中区），但它**完全不影响弹出菜单里的 <option></option> 渲染**。你仍然无法设置选项的字体大小、行高、上下间距或背景悬停色。
容易踩的坑：
- 以为加了
-webkit-appearance: none就能像普通元素一样操作<option></option>—— 实际毫无作用 - 在移动端（尤其是 iOS Safari）强行缩放
<select></select>，触发最小触摸热区限制（44×44px），导致点不中 - 用
transform: scale()缩放后，Lighthouse 在 Chrome 120+ 会报 “form elements not scalable” 可访问性警告
必须大面积/高定制时，放弃原生 <select></select>
如果你的需求包含以下任意一条，就该立刻切到自定义方案：
- 要求所有选项严格统一高度（比如 48px 行高 + 图标 + 多行文本）
- 需要 hover 高亮、键盘导航（ArrowDown/Enter）、搜索过滤
- 选项超过 20 项，需虚拟滚动或分页加载
- 要适配高对比模式、屏幕阅读器、Windows Narrator
此时用 <div class="custom-select">
<button></button><ul aria-hidden="true"><li role="option"></ul>
</div> 结构，配合 aria-expanded、aria-activedescendant 和键盘事件监听，才是唯一可靠路径。原生 <select></select> 的“高度”本质是系统控件边界，不是 CSS 盒模型——这事从 1995 年起就没变过。
