height对原生select无效，因浏览器将其拆为顶部按钮区（可样式化）和系统绘制的弹出菜单（CSS无法控制），height仅影响前者；Chrome/Edge中菜单仍按默认高度展开；真正可控方案是用div+ul重写。
height 对原生 <select> 元素基本无效，尤其在 Chrome/Edge 中只缩放顶部选中区，弹出菜单完全不受控。
为什么 height 在 <select> 上不生效
浏览器把 <select> 拆成两个独立渲染层：顶部可样式化的“按钮区”和底层由操作系统绘制的“弹出菜单”。你设的 height: 40px 只影响前者；后者行高、项数、滚动行为全由系统决定，CSS 无法穿透。
- Chrome/Edge 中
height+padding可能让按钮区变形，但点击后菜单仍按默认高度展开（通常显示 8–10 行） -
line-height对<select>本身几乎无作用 -
appearance: none能隐藏箭头，但**不开放对弹出层的样式控制权**
transform: scale() 是最轻量的视觉调整方案
它不改变 DOM 结构，仅缩放渲染结果，适合快速压缩整体视觉高度。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 必须配合
transform-origin和margin-top补偿位移，否则会错位 - 示例：
select {<br> transform: scale(1, 0.8);<br> transform-origin: top center;<br> margin-top: 6px;<br>} - 副作用明显：文字、边框、箭头全部等比缩小，需同步调大
font-size或用zoom（已废弃，仅 IE 支持） - Chrome 120+ 会对缩放后的表单元素报可访问性警告（Lighthouse），高对比模式下可能失效
真正可控的方案：用 <div> + <ul> 完全重写下拉
放弃原生 <select>，用语义化结构模拟，所有尺寸完全自由。
立即学习“前端免费学习笔记（深入）”；
- 关键样式点：
.dropdown ul设max-height: 200px+overflow-y: auto，而非在父容器上设height - 必须加
aria-expanded和aria-controls，否则屏幕阅读器无法识别状态 - 点击外部关闭需监听
document.addEventListener('click')，不能只靠blur - iOS Safari 有最小触摸热区（44×44px），强行缩小会导致点不中
容易被忽略的兼容性雷区
即使你用了 appearance: none + 自定义背景箭头，仍要检查三件事：
- iOS Safari 下，
min-height小于 44px 的容器大概率无法触发点击 - Windows 高对比模式中，自定义菜单若没显式设
color/background/border，可能整块消失 - Chrome 对
transform缩放的表单元素，在 Lighthouse 里会标为 “form elements not scalable”，影响无障碍评分
