原生 select 无法通过 css 控制下拉弹层高度，唯一跨浏览器生效的限高方式是 html 的 size 属性；若需自定义弹层样式与滚动行为，必须用 div+button+ul 模拟并手动处理交互与 aria。

原生 select 的高度根本不能“覆盖”默认样式

浏览器对 select 的渲染是分层的：顶部可点击区域（部分可样式化）和弹出菜单（完全不可样式化）。你写的 max-height、height、line-height 全部只作用于前者，对下拉弹层零影响。Chrome/Firefox/Safari 均不支持通过 CSS 控制弹出层高度或滚动行为——这不是兼容性问题，而是设计限制。

size 属性是唯一跨浏览器生效的限高方式

它不是 CSS，而是 HTML 原生属性，直接告诉浏览器“展开时显示几行选项”。浏览器据此计算弹出层初始高度并自动加滚动条。

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

• size="5" 表示最多显示 5 行，超出需滚动；size="1" 等效于默认下拉（隐藏列表）
• 它会改变渲染模式：select 变成多行控件，失去“点击展开”交互，变成始终展开状态
• iOS Safari 可能无视 size，强制走全屏选择器，无法规避

要保留点击展开 + 自定义高度？必须放弃 select

用 div + button + ul 模拟，才能真正控制弹出层的 max-height、overflow-y、滚动条样式、焦点逻辑等。

• ul 上设 max-height: 200px 和 overflow-y: auto 才有效
• 必须手动处理键盘导航（ArrowDown/Enter）、焦点管理、ARIA 属性（aria-expanded、aria-activedescendant）
• appearance: none 对原生 select 只能隐藏箭头，不解除弹层样式封锁

别在 select 上浪费时间调 height 或 transform

有人试过 transform: scale(1, 0.8) 缩放整个 select，看似压扁了高度——但实际只是视觉欺骗：文字变小、边框变细，而弹出菜单依然按系统默认行高撑开，且缩放后焦点框错位、移动端适配崩溃。

• 这种 hack 会导致表单可访问性下降，屏幕阅读器可能读错尺寸或状态
• 不同浏览器对 transform 的渲染精度不一致，尤其在 Retina 屏上出现模糊或锯齿
• 若项目需深色模式、高对比度模式或 WCAG 合规，这类方案基本不可维护

真实限制就摆在这儿：要么接受浏览器的默认行为，要么重写交互逻辑。没有中间路线。

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