直接设 height 对 select 无效，因弹出菜单由系统渲染且 CSS 不穿透；唯一原生可控方案是 size 属性；微调可用 transform: scale()；高定制需求须彻底替换为自定义组件。

直接给 设 height 几乎没用——它只可能压扁顶部按钮区，点开后的下拉菜单高度、行数、滚动行为全不受控。真正能改“展开后看起来多高”的，只有 size 属性；想微调视觉尺寸，transform: scale() 是少数安全选项；真要精确控制每项高度、滚动条样式或键盘导航，就得放弃原生 。

为什么 height 和 line-height 对 无效

浏览器把 拆成两层：顶部可点击的“选中区”（CSS 能有限影响）和脱离文档流的弹出菜单（由操作系统或 UA 渲染，CSS 完全穿不透）。你写的 height: 40px 在 DevTools 里被划掉，不是优先级问题，是它根本没被解析。同理：

• option { height: 40px }、line-height: 2.5 全部静默失败，Chrome/Firefox/Safari/iOS Safari 一律无视
• padding 只影响选中区文字垂直居中，不影响弹出层行高
• iOS Safari 强制最小触摸热区为 44×44px，硬设 height: 24px 会导致点不中

用 size 属性控制可见行数（原生最稳方案）

size 是 HTML 原生属性，不是 CSS，它是目前唯一跨浏览器、不依赖 JS、能稳定控制“展开后显示几行”的方式。它让 切换为常驻列表模式，此时高度由行数 × 浏览器默认行高决定。

HTML Text Extract

从HTML页面（URL、文件或标准输入）中提取主体内容文本，去除导航、页脚、广告和模板文本。可直接传递给readability_check或其他文本工具。

下载

• 写法：A → 展开后固定显示 4 行，超出自动滚动
• size="1" 等效于默认单选下拉，但旧版 Safari 可能丢失箭头，慎用
• size 值必须是纯数字字符串（如 "5"），不能带单位（"5px" 会失效）
• 副作用：交互从“点击展开”变成“常驻列表”，移动端易误触，且无法配合 max-height 实现弹性限高

用 transform: scale() 微调视觉高度（轻量折中）

如果必须保留单选下拉样式又想压缩整体视觉尺寸，transform: scale(1, 0.85) 是比硬改 height 更可控的方式——它缩放整个元素（含文字、边框），不会触发弹出层渲染错乱。

• 必须加 transform-origin: top center，否则元素整体上移
• 补 margin-top: 4px 抵消上偏移，否则布局错位
• 同步调大 font-size（如原 14px → 改为 16px），避免缩放后文字糊成一团
• Chrome 120+ 会报 “form elements not scalable” 可访问性警告，政务/金融类表单慎用

彻底自定义下拉组件（100% 可控但细节极多）

当设计要求明确包含「固定最大高度 200px + 每项 48px 行高 + hover 高亮 + 键盘导航」时，放弃原生 是唯一路径。核心是隐藏原生元素，用

+ +

模拟，并用 JS 同步值。

• 上设 max-height: 200px + overflow-y: auto，而不是父容器 —— 滚动必须作用在真正承载菜单项的容器上
• 每个
• 可自由设 padding、line-height、min-height，完全自主
• 必须监听 Escape 键收起、ArrowDown/Up 导航、Enter 确认、外部点击关闭
• 原生 必须保留在 DOM 中（position: absolute; opacity: 0; pointer-events: none;），并同步更新其 value 和 aria-selected

真正难的不是写代码，而是所有自定义下拉都得过一遍可访问性校验——漏掉 aria-expanded 或焦点管理，屏幕阅读器用户就卡死在第一个选项上。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！