原生 select 的 height 和 max-height 不起作用，因其下拉菜单由系统底层绘制、CSS 无法穿透；唯一可靠限高方案是使用 size 属性（如 size="5"），但会变为多行控件；若需点击展开交互，必须用自定义 div+ul 实现，并处理定位、键盘导航与可访问性。
原生 select 的 height 和 max-height 为什么不起作用
因为浏览器把 select 拆成两部分：顶部可点击区域（能被 CSS 影响），和弹出的下拉菜单（由系统或浏览器底层绘制，CSS 完全穿透不了）。你设了 height: 40px 或 max-height: 150px，只可能压扁按钮区，弹出来的菜单该多高还是多高——通常默认显示 8–12 行，且不响应 overflow。
Chrome、Edge、Safari 全部无视 max-height 在弹出层上的声明；Firefox 虽然部分 UA 样式可调，但行为不稳定，上线后容易在其他设备上失效。
常见错误现象：max-height 写在 select 上，Lighthouse 直接报“样式未生效”；移动端（尤其 iOS Safari）连 size 属性都可能被跳过，强制走全屏选择器。
用 size 属性限制可见行数（唯一原生可靠方案）
size 是 HTML 原生属性，它明确告诉浏览器“展开时显示几行选项”，所有主流浏览器一致支持，不需要 JS，也不依赖 CSS。
立即学习“前端免费学习笔记（深入）”；
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
-
size="5"→ 展开后最多显示 5 行，超出自动加滚动条 -
size="1"→ 等效于默认下拉（即隐藏列表，仅显示当前选中项） - 注意：
size会让select渲染为多行控件（类似textarea），失去“点击展开”交互，适合固定展示、表单预览等场景 - 不能和
multiple混用（否则变成多选框）
要保留“点击展开”交互，就必须放弃 select
想点一下才弹出、弹出后又限高？size 不适用，只能用 div+button+ul 自定义。这不是“要不要写 JS”的问题，而是“绕不开的 DOM 结构前提”：
- 父容器必须设
position: relative，否则ul下拉层会定位错乱 - 下拉层（
ul）设max-height: 200px+overflow-y: auto，这才是真正生效的限高 - 必须监听外部点击关闭、
Escape键关闭、ArrowDown/ArrowUp导航，否则键盘用户无法操作 - 漏掉
aria-expanded和aria-controls，屏幕阅读器就识别不出状态 - iOS Safari 对
focus极不敏感，得额外处理touchstart和blur同步逻辑
别碰 transform: scale() 缩放 select
有人试过用 transform: scale(1, 0.8) 把 select 压扁——它确实让顶部区域变矮了，但弹出菜单仍按原始尺寸展开，缩放完全不作用于 popup 层。
更麻烦的是：Chrome 120+ 开始对这类缩放表单元素触发可访问性警告（Lighthouse 报 form elements not scalable）；iOS Safari 还有最小触摸热区要求（约 44×44px），缩太小直接点不中。
真正对齐高度或控制视觉比例，应该靠父容器约束（比如 display: flex + align-items: center），而不是在 select 上硬调 height 或 scale。
