下拉列表子项高度不生效的根本原因是浏览器原生限制，<option> 不支持 height、line-height、transform、margin 等样式；唯一可靠方案是改用伪下拉（<div>+<ul>+JS），完全控制子项盒模型。

下拉列表子项高度不生效的常见原因

直接给 <option> 设置 height 或 line-height 在绝大多数浏览器中完全无效——这是 HTML 表单控件的原生限制，不是你写错了 CSS。Chrome、Edge、Firefox 都会忽略对 <option> 的高度相关样式，只尊重极少数属性（如 color、background-color）。

真正能控制下拉展开后选项视觉高度的方法

唯一可靠路径是放弃原生 <select>，改用「伪下拉」：用 <div> + <ul> + JavaScript 模拟行为，并完全掌控每个子项的盒模型。

• 用 display: flex 或 padding 控制 <li> 高度，例如：

  .dropdown-item { padding: 12px 16px; }

• 确保父容器 <ul> 有明确 max-height 和 overflow-y: auto，避免长列表撑满屏幕
• 必须监听点击/键盘事件（ArrowDown、Enter），手动管理焦点和选中态，否则可访问性会出问题
• 注意 iOS Safari 对自定义下拉的滚动阻尼和点击穿透敏感，建议加 touch-action: manipulation

如果必须用原生 select，能做的有限调整

仅限微调视觉节奏，无法真正“设高度”：

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

• 增大 <select> 自身的 padding，让文字在下拉展开时看起来更“松散”
• 用 font-size 间接影响行高（但字体太大可能触发移动端缩放）
• 某些旧版 IE 允许 line-height 在 <option> 上生效，但现代标准已废弃该行为，不可依赖
• 避免设置 font-family 为等宽字体以外的特殊字体，部分字体在下拉渲染时会压缩行距

为什么不能用 transform 或 margin 挤开 option

所有作用于 <option> 的 transform、margin、position 都会被浏览器静默丢弃。这不是兼容性问题，而是规范层面的约束——<option> 不是普通流内元素，它没有 box model 的完整参与权。试图用 outline 或 border “伪造”间距也无效，因为这些样式根本不会渲染到下拉面板中。

立即学习“前端免费学习笔记（深入）”；

真正需要精确控制子项高度时，别犹豫，换伪下拉。原生 <select> 的自由度就到那里了。