select设height集体失效，因其为替换元素，height仅影响触发区，弹出菜单由系统绘制且css无效；各浏览器对line-height、padding等支持不一；推荐transform:scale()或padding+box-sizing方案，强需求需完全自定义组件。
直接给多个 select 设 height 为什么集体失效
因为 select 是替换元素，浏览器只用 height 调整顶部“触发区”，弹出菜单由系统绘制、不在 DOM 中，CSS 完全无效。你批量加 height: 36px，结果只是所有按钮区被压扁，点开后菜单仍按默认行高展开 8–12 行——各浏览器响应还不一致：Chrome 忽略 line-height，Safari 基本无视 padding，iOS 甚至会因热区过小导致点不中。
用 transform: scale() 批量缩放最轻量
无需 JS、兼容 IE11+，适合“视觉统一”场景，但必须同步处理位移和文字可读性：
-
transform: scale(1, 0.85)垂直压缩到 85%，水平不变 - 必加
transform-origin: top center，否则整体上移 - 补
margin-top: 4px抵消上移偏移 -
font-size要手动调大（如原14px→ 改为16px），否则缩放后文字糊成一团 - Chrome 120+ 会对这种缩放报可访问性警告，别在政务/金融类表单里硬上
用 padding + box-sizing 精确对齐输入框高度
当需要和 input[type="text"] 像素级对齐时，这是比 height 更稳的方案：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 统一设
box-sizing: border-box，确保height包含border和padding - 用
padding: 8px 12px替代height控制视觉高度，文字垂直居中更自然 - 加
appearance: none和-webkit-appearance: none剥掉原生箭头，再用::after画自定义图标，避免箭头错位 - 别碰
option标签样式——height、line-height全部静默失败，白写
真要控制弹出层高度？批量重写是唯一路径
如果需求明确是“所有下拉展开后最多显示 5 行、每行 32px、带自定义滚动条”，原生控件做不到。此时批量修改 = 批量替换：
- 把每个
select包进<div class="custom-select">，隐藏原生元素（<code>opacity: 0或position: absolute） - 用
<button></button>模拟触发区，<ul role="listbox"></ul>模拟弹出层，max-height: 160px+overflow-y: auto真生效 - 每项
<li role="option">可自由设padding、line-height、height - 必须批量注入键盘事件监听（
ArrowDown/Escape）、aria-expanded切换、外部点击关闭逻辑 - 移动端要加
touchstart+preventDefault()，否则 300ms 延迟导致连点失效
真正难的不是写代码，而是所有自定义下拉都得过一遍可访问性校验——漏掉 aria-selected 或焦点管理，屏幕阅读器用户就卡死在第一个选项上。
