直接设 height 对 select 无效，因下拉菜单是系统级独立 UI 层，CSS 无法穿透；padding 是最稳定控制“伪行高”的方式；真要控制下拉高度须用自定义方案。
为什么直接设 height 对 select 无效
因为浏览器把 select 当作原子控件：顶部可样式化区域（按钮区）能被 height 影响，但点击后弹出的下拉菜单是系统级 UI 绘制的独立层，CSS 完全穿不透。你在 Chrome 或 Edge 里写 height: 40px，只会压扁按钮区，弹出菜单依然按默认行高显示 8–10 行，滚动条位置、项间距、聚焦高亮全不受控。
Firefox 虽然对 height 响应稍好，但行为不稳定；Safari 和 iOS Safari 几乎无视它。更麻烦的是，强行缩放或负 margin 可能导致触摸热区失效（iOS 要求 ≥44×44px），或触发 Lighthouse 的可访问性警告。
padding 是最稳的“伪行高”控制方式
想让文字垂直居中、整体看起来更舒展，padding 是兼容性最好、副作用最小的方案：
-
padding: 10px 12px同时撑开上下内边距，视觉上等效于调高行高 - 配合
box-sizing: border-box，确保height+padding总和可控 - 避免只设
padding-top或padding-bottom—— 不同浏览器垂直对齐逻辑不同，容易偏移 - 移动端需注意：过小的
padding（如4px）可能让手指点不中，建议 ≥8px
真要控下拉菜单高度？必须放弃原生 select
只要需求里出现“固定最多显示 5 行”“滚动区域高度精确为 160px”“选项文字行高统一为 24px”，就必须用自定义方案。原生 select 的弹出层没有 DOM 节点，你连 option 都选不到。
立即学习“前端免费学习笔记（深入）”；
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
轻量做法是用 div + button + ul 模拟，关键控制点：
- 下拉容器（
ul）设max-height: 160px; overflow-y: auto，而不是父级div设height - 禁用
display: none控制显隐 —— 改用visibility: hidden; opacity: 0; pointer-events: none，保焦点链和动画过渡 - 必须加
role="listbox"和每个li加role="option" aria-selected="true"，否则屏幕阅读器读不出当前选中项 - 超过 30 项时，别硬堆 DOM —— 加搜索过滤，或用
IntersectionObserver做可视区渲染
size 属性还能用，但仅限表单提交场景
select 标签原生支持 size="4" 这类属性，它会让下拉框以多行列表形式常驻显示（非弹出式），此时 height 才真正生效 —— 因为这时渲染的是普通 HTML 流式内容，不是系统菜单。
但它有硬限制：
- 仅适用于
multiple场景，单选下拉不会响应size - 移动端 Safari 会降级为弹窗，失去多行效果
- 语义上它不再是“下拉”，而是“列表框”，
required行为也不同（空值校验逻辑变复杂） - 如果只是想让界面看起来“高一点”，用
size会导致布局突兀，不如用padding+transform: scale()微调
真正难的从来不是怎么让它变高，而是怎么让“变高”这件事不破坏可访问性、不卡住移动端、不被屏幕阅读器跳过 —— 这些细节藏在 aria- 属性、tabindex 和事件监听顺序里，而不是 CSS 文件末尾那几行注释中。
