直接设 height 对 select 无效，因其被浏览器拆分为可样式化的选中区和操作系统绘制的弹出菜单，CSS 无法控制后者；padding 是最稳妥的视觉高度调节方式，配合 box-sizing: border-box 可避免宽度溢出。

为什么直接设 height 对 select 无效

你给 select 写 height: 40px，看起来顶部区域变高了，但点开下拉菜单后，选项行高、滚动条、可见项数全都不受控制——这是因为浏览器把 select 拆成两部分渲染：顶部可样式化的“选中区”，和底层由操作系统绘制的“弹出菜单”。CSS 根本穿不透后者。

padding 是最稳妥的视觉高度调节方式

想让下拉框看起来更紧凑或更高，padding 是兼容性最好、副作用最小的手段：

• padding: 10px 12px 能撑开整体视觉高度，同时让文字自然垂直居中
• 搭配 box-sizing: border-box 可避免宽度意外溢出
• 在 Firefox 中可能略微影响下拉项间距，但比 height 可靠得多
• 不要对 option 设 padding——所有主流浏览器都忽略它

限制下拉弹层高度只能靠父容器 + max-height

真正能控制“点开后最多显示多少内容”的，不是 select 自身，而是它的父容器：

Wechat Article Html

将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。

下载

• 给包裹 select 的 div 加 max-height: 200px 和 overflow-y: auto
• 避免直接给 select 设 max-height，Chrome/Safari 下基本无效
• 移动端（尤其是 iOS Safari）会强制最小触摸热区为 44×44px，缩得太小会导致点不中
• 若用 transform: scale() 缩放整个 select，Lighthouse 在 Chrome 120+ 会报“form elements not scalable”警告

需要完全可控？必须放弃原生 select

当设计要求统一行高、自定义滚动、截断长文本、键盘导航精确控制时，原生 select 已经到极限了：

• 用 div + button + ul 模拟，所有尺寸（line-height、max-height、padding）自由设置
• 必须补全 aria-expanded、aria-controls、role="listbox" 等无障碍属性
• 点击外部关闭需监听 document.addEventListener('click')，不能只靠 :focus-within
• 键盘支持不是可选项：至少要响应 ArrowDown、Enter、Escape

最常被忽略的一点：即使你用了 appearance: none 和背景箭头，iOS Safari 仍会按系统规则渲染弹出层——你看到的“样式生效”，往往只是顶部区域；真正的交互层，始终游离在 CSS 控制之外。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！