原生 select 下拉层高度无法用 css 的 height 或 line-height 控制，因其是替换元素，下拉菜单由操作系统或浏览器 ui 绘制；可靠方案是使用 size 属性指定可见行数，或彻底替换为自定义组件。
select 元素的下拉弹出层高度无法用 CSS 的 height 或 line-height 控制，所谓“显示不完整”，本质是原生菜单项被截断或滚动条意外出现——这不是样式没写对，而是浏览器根本不让你管它。
为什么 height 和 line-height 对 select 下拉菜单无效
原生 select 是替换元素（replaced element），它的下拉弹出层由操作系统或浏览器 UI 框架绘制，CSS 无法穿透。你设了 height: 32px，只影响顶部可点击区域；点开后弹出的菜单行高、总高度、是否滚动，全由 UA 样式和系统决定。
- Chrome/Edge 中
option高度固定，padding和height在option上完全被忽略 - Firefox 偶尔响应
padding，但行为不稳定，不能作为兼容方案 - iOS Safari 强制最小触摸热区（44×44px），强行压缩会导致点不中
- 即使用了
appearance: none，也只是隐藏箭头，下拉层仍不可样式化
真正能控制下拉项可见数量的方法：用 size 属性
size 是 select 原生支持的 HTML 属性，它明确告诉浏览器“我想一次显示 N 行选项”，浏览器会据此调整弹出层高度，避免内容被截断或滚动条突兀出现。
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 写法：
<select size="5">...</select>，值为整数，表示可见option行数 - 当选项总数 ≤
size值时，全部展开无滚动；超过则自动加垂直滚动条 - 比纯 CSS 更可靠：它不依赖渲染引擎，各浏览器行为一致
- 注意：设
size后，select会变成多行显示模式（类似<textarea></textarea>），若只需单行外观，需配合 CSS 重置视觉（如display: inline-block+vertical-align: middle）
需要完全自定义高度和滚动行为？必须放弃原生 select
如果设计要求下拉层最大高度为 200px、行高 36px、支持键盘导航、无障碍标签齐全——原生 select 从底层就不支持。此时唯一解是模拟：
- 结构用
<div class="custom-select"> <button></button><ul tabindex="-1"></ul> </div> -
ul设max-height: 200px; overflow-y: auto;，所有尺寸完全可控 - 必须实现：
aria-expanded、aria-controls、Enter/Escape关闭、ArrowDown/ArrowUp导航、点击外部关闭 - 移动端需监听
touchstart并阻止默认行为，否则 iOS 会触发两次点击
最常被忽略的一点：很多人以为“加个 overflow: hidden 就能防溢出”，但原生 select 的弹出层是脱离文档流的独立浮层，父容器的 overflow 对它毫无影响。想控高度，要么用 size，要么换组件——没有中间路径。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
