height 和 line-height 对 select 无效，因其弹出菜单为系统级 UI；唯一原生可控方案是 size 属性；需自定义组件才能真正控制高度、交互与无障碍。
直接给 select 设 height 或 line-height 基本无效——它只压扁顶部可点击区域，弹出菜单高度完全不受控。
为什么 height 和 line-height 对下拉菜单没用
浏览器把 select 拆成两部分：上面的“选中区”（CSS 可部分干预）和下面独立绘制的“弹出菜单”（系统级 UI，CSS 无法穿透）。你设了 height: 50px，Chrome 可能只让按钮变高，点开后还是显示 8–10 行默认高度的选项；line-height 更是直接被忽略，因为 select 是替换元素，不走标准行内布局逻辑。
- Firefox 偶尔响应
padding，但行为不稳定，不能当跨浏览器方案 - iOS Safari 对任何高度样式都极不敏感，甚至
size属性都可能被无视 - Lighthouse 会明确报出 “
max-heightonselecthas no effect”
真正能调高的原生方案：用 size 属性
size 是 HTML 原生属性，不是 CSS，它告诉浏览器“展开时默认显示几行”，浏览器据此计算弹出层初始高度并加滚动条。这是唯一全平台一致、无需 JS 的方式。
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
-
<select size="8">→ 展开后最多显示 8 行，超出可滚动 -
size="1"等效于默认下拉（隐藏列表），语义上仍是单选 - 注意：
size会让select渲染成多行控件（类似textarea），失去“点击展开”交互，适合表单固定展示场景 - 移动端慎用：iOS Safari 可能强制转为全屏选择器，
size形同虚设
要保留点击展开 + 高度可控？只能自定义
放弃原生 select，用 div+button+ul 模拟，才能真正控制弹出层高度、滚动、对齐等所有细节。
立即学习“前端免费学习笔记（深入）”；
- 父容器必须
position: relative，下拉层position: absolute; top: 100%; max-height: 200px; overflow-y: auto - 别漏掉键盘支持：
ArrowDown/ArrowUp导航、Enter确认、Escape关闭 - 无障碍必须加：
aria-expanded、aria-controls、role="listbox"、每个li加role="option" - 移动端要监听
touchstart和focus状态同步，否则 iOS Safari 点不中
别踩这些坑
很多人试过 transform: scale() 或强行 padding 撑高，结果在高对比模式下文字消失、Lighthouse 报可访问性失败、或 iOS 上热区变小点不中。真正麻烦的不是“怎么写”，而是“哪些地方浏览器根本不给你改”——比如 option 高度永远不可控，appearance: none 只剥掉箭头，不解放弹出层。如果项目对一致性要求高，早换自定义方案，比反复调参省心。
