原生<select>的height和line-height无效，因其弹出菜单由系统绘制、CSS无法穿透；padding是唯一稳定控制“选中区”高度的属性；size属性可跨浏览器控制显示行数；transform:scale()为轻量视觉调整方案；高定制需求须彻底自定义组件并保障可访问性。
height 对原生 <select> 无效，这不是写法问题，而是浏览器渲染机制决定的——你调的只是顶部“选中区”，弹出菜单由系统绘制，CSS 穿不透。
为什么 height 和 line-height 都不生效
浏览器把 <select> 拆成两个独立部分：<select> 本体（可被有限 CSS 影响）和脱离文档流的弹出菜单（操作系统/UA 控制）。你在 DevTools 里看到 height: 32px 被“划掉”，不是优先级不够，是它根本没被解析。同理，option { height: 40px }、line-height: 2.5 全部静默失败，Chrome、Edge、Safari、iOS/Android 浏览器全部无视。
-
padding是唯一稳定影响“选中区”视觉高度的属性，比如padding: 8px 12px能让文字垂直居中且控高可靠 -
appearance: none只能隐藏箭头，对弹出层零影响 - iOS Safari 强制最小触摸热区为
44×44px，硬设height: 24px会导致点不中
用 size 属性控制可见行数（原生最稳方案）
size 是 HTML 原生属性，不是 CSS，它是目前唯一跨浏览器、不依赖 JS、能稳定控制下拉“显示几行”的方式。它让 <select> 渲染为常驻列表而非弹出式，此时 height、padding、font-size 才真正生效。
- 写法：
<select size="4"><option>A</option></select>→ 展开后固定显示 4 行，超出自动滚动 -
size="1"等效于默认单选下拉，但旧版 Safari 可能丢失箭头，慎用 - 副作用：交互从“点击展开”变成“常驻列表”，移动端易误触，且无法配合
max-height实现弹性限高
用 transform: scale() 微调视觉高度（轻量折中）
如果必须保留单选下拉样式又想压缩整体视觉尺寸，transform: scale(1, 0.8) 是少数能“看起来变矮”的办法，但它缩放的是整个元素（含文字、边框），需手动补偿。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
立即学习“前端免费学习笔记（深入）”；
- 必须加
transform-origin: top center和margin-top抵消上偏移，否则布局错位 - 同步调大
font-size（如原14px→ 改为16px），避免文字过小模糊 - Chrome 120+ 会报 “form elements not scalable” 可访问性警告，Lighthouse 标红
- 移动端缩放后文字渲染清晰度不一致，需真机测试
彻底自定义下拉组件（100% 可控但必须处理细节）
当设计要求明确包含「固定最大高度 + 每项 48px 行高 + hover 高亮 + 键盘导航」时，放弃原生 <select> 是唯一路径。核心是隐藏原生元素，用 <div>+<button>+<ul> 模拟，并用 JS 同步值。
-
<ul>上设max-height: 240px+overflow-y: auto，这才是真生效的限高 - 每项
<li>可自由设height、line-height、padding，完全不受限制 - 必须监听
Escape、ArrowDown/Up、Enter，否则键盘用户无法操作 - 原生
<select>不能删，得保留在 DOM 中（opacity: 0; pointer-events: none;），用于表单提交和无障碍支持
真正卡住人的从来不是“怎么写 CSS”，而是接受一个事实：弹出菜单高度不可控。要么用 size 接受交互妥协，要么投入精力补全可访问性与移动端适配——没有中间态。
