height和line-height对select无效，因其是替换元素：顶部选中区部分可样式化，但弹出菜单为系统级UI，CSS无法穿透；设height仅影响外容器，弹出层仍按默认行高显示8–12行。
为什么直接设 height 或 line-height 对 select 无效
因为 select 是替换元素（replaced element），浏览器把它当做一个整体控件处理：顶部可点击区域能被部分样式影响，但弹出的下拉菜单是脱离文档流的系统级 UI，CSS 无法穿透。你写 line-height: 40px，浏览器直接忽略；写 height: 40px，可能只压扁了选中区，弹出菜单仍按默认行高显示 8–12 行。
Chrome 和 Firefox 对 padding 的解析也不一致——比如同样 padding: 8px 12px，Chrome 可能把下拉箭头区域算进内边距，Firefox 却会压缩内容高度。iOS Safari 更彻底：几乎无视所有对 option 的样式干预。
怎么让 select 和 input 高度视觉对齐
关键不是单个元素调参，而是统一渲染基线 + 父容器约束：
- 给
select和input[type="text"]同时设height: 40px、box-sizing: border-box、padding: 8px 12px、font-family和font-size - 必须加
appearance: none和-webkit-appearance: none去掉原生箭头，否则右边留白不一致 - 用
background手动补一个右对齐 SVG 箭头，避免空白 - 把它们包进
display: flex; align-items: center的父容器里，否则vertical-align: baseline会导致 1–2px 错位 - 确保两者都设
margin: 0，浏览器默认 margin 容易干扰对齐
怎么限制下拉菜单的可见选项数量（不是“撑高”）
max-height 对原生 select 的弹出层完全无效——Lighthouse 会直接报“样式未生效”。唯一跨浏览器原生方案是 size 属性：
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
-
表示展开后最多显示 5 行，超出自动滚动条 -
size="1"等效于默认下拉行为（隐藏列表，点击展开） - 注意：
size会改变渲染模式，它让select变成多行控件，失去“点击展开”交互，适合固定展示场景 - 移动端（尤其是 iOS Safari）可能无视
size，强制走全屏选择器
真正需要“点击展开 + 限高 + 样式可控”时怎么办
只能放弃原生 select，用 div+button+ul 模拟：
- 父容器设
position: relative，下拉层（ul）用position: absolute; top: 100%; max-height: 200px; overflow-y: auto - 必须监听外部点击、
Escape键、ArrowDown/Up导航，否则可访问性不达标 - 加上
aria-expanded和aria-controls，不然屏幕阅读器无法识别状态 - 移动端要额外处理
touchstart和focus同步，iOS Safari 对 focus 触发极不敏感
最常被忽略的是：哪怕你把 select 缩放、重置、包裹再严实，只要它还是原生元素，弹出菜单就永远不受 CSS 尺寸控制——这个边界没法绕开。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
