浏览器对 option 元素样式支持极弱，height、line-height 等 css 属性均被忽略，因其渲染由操作系统接管；可控方案仅有缩放 select 或完全自定义下拉组件。
直接给 option 设 height 或 line-height 无效
浏览器对 option 元素的样式支持极弱，绝大多数 CSS 属性（包括 height、line-height、padding、margin）在 Chrome、Edge、Safari 和移动端 iOS/Android 浏览器中完全被忽略。这不是写法问题，而是规范限制：option 是系统级控件的一部分，渲染由操作系统或 UA 样式接管，CSS 无法穿透。
select 的 height 只影响顶部可点击区域
给 select 设置 height 看似“生效”，其实只压缩或拉伸了选中区（即下拉箭头所在部分），对弹出菜单里的 option 行高毫无影响。你看到的“变高/变矮”只是假象，点击后弹出的列表仍按默认行高显示 6–10 行，且滚动条行为不可控。
- Chrome/Edge：弹出菜单高度固定，
height仅改变外容器视觉尺寸 - Firefox：部分版本允许有限调整，但行为不稳定，不建议依赖
- iOS Safari：最小触摸热区强制约 44×44px，强行缩小会导致点不中
真正可控的两种路径
如果必须统一单项视觉高度，只有两个实际可行方向：
-
轻量缩放方案：用
transform: scale(1, 0.8)缩放整个select，再通过transform-origin和margin-top补偿位移。注意同步调大font-size防止文字过小，且该方案在 Chrome 120+ 会触发可访问性警告 -
完全自定义方案：放弃原生
select，改用div+button+ul+li模拟，配合 JS 控制显隐与选中。此时li的height、line-height、padding完全自由，但需手动实现aria-expanded、键盘导航（ArrowDown/Enter/Escape）和外部点击关闭
别踩这些兼容性坑
即使用了 appearance: none 隐藏原生箭头，也改变不了 option 渲染逻辑。更隐蔽的问题包括：
- Windows 高对比模式下，自定义下拉若没设
color和background，可能整片空白 - 移动端 Safari 对
multiple下拉支持差，点开无响应，不能靠 CSS 修复 -
size="4"属性虽能强制显示 4 行，但会破坏聚焦逻辑和滚动体验，且不响应 CSS 高度控制
真正需要一致单项高度的场景，基本都绕不开自定义组件——这不是过度设计，而是浏览器能力边界决定的。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
