原生select的height和max-height无法调高或调低，因其弹出菜单是系统级独立绘制层，css无法穿透；仅顶部可点击区域受有限影响，弹出项默认显示8–12行且高度不可控。
原生 select 的 height 和 max-height 为什么调不高也调不低
因为浏览器把 select 当作一个“黑盒控件”：顶部可点击区域（control）能被 CSS 有限影响，但弹出的下拉菜单（popup）是系统级绘制的独立层，CSS 根本穿不进去。你设 height: 24px 或 max-height: 100px，只可能压扁顶部按钮区，弹出来的菜单该多高还是多高——通常默认显示 8–12 行，且滚动条行为不可控。
常见错误现象包括：line-height 对 select 无效、padding 在 Safari 中表现异常、给 option 加样式完全被忽略（所有主流浏览器均不支持）。
-
height+box-sizing: border-box可勉强控制顶部区域高度，但无法改变弹出项行高或总高度 -
transform: scale(1, 0.7)会缩放整个元素（含文字），但弹出菜单仍按原始尺寸展开，且 Lighthouse 会警告可访问性问题 - iOS Safari 对过小的
height（如
size 属性是唯一跨浏览器有效的“限高”方案
size 是 HTML 原生属性，它强制 select 进入“多行列表模式”，此时浏览器会根据值渲染固定行数的可见区域，并在超出时自动加垂直滚动条——这才是真正生效的限高逻辑。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
例如：<select size="3"><option>A</option>
<option>B</option>
<option>C</option>
<option>D</option></select> 展开后最多显示 3 行，第 4 项需滚动查看。
-
size="1"等效于默认下拉（隐藏列表），但语义上仍是多行控件，部分屏幕阅读器会读作“列表”，非“下拉” - 桌面端兼容性极好；移动端（尤其 iOS）可能降级为全屏选择器，
size被无视 - 它会破坏“点击展开”的交互预期——用户看到的是一个带滚动条的静态列表，不是传统下拉动效
要保留点击展开 + 精确限高？只能用 div+ul 自定义
这是唯一能同时满足“点击触发”“高度可控”“滚动精准”“样式自由”的路径。核心不是写得多，而是绕开几个关键坑：
- 父容器必须设
position: relative，下拉层用position: absolute; top: 100%; max-height: 200px; overflow-y: auto - 必须监听
click外部关闭、Escape键、ArrowDown/Up导航，否则键盘用户卡死 - 缺
aria-expanded和aria-controls，屏幕阅读器无法识别开闭状态 - 移动端要处理
touchstart和focus同步，iOS Safari 的focus触发延迟极高
容易被忽略的细节：提交值和无障碍的连带影响
自定义下拉最常漏掉的不是样式，而是表单语义链路断掉。比如用户选中后没更新 input[type=hidden] 的 value，后端收不到值；又或者没同步设置 aria-activedescendant，键盘导航就失效。
更隐蔽的问题是：即使你用 appearance: none 隐藏了原生箭头，select 本身仍受操作系统最小触控尺寸限制（iOS 要求 ≥44×44px），强行缩小会导致点不中——而自定义组件可以完全绕过这点，但也意味着你要自己实现高对比模式下的颜色适配、焦点环、禁用态灰度等。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
