直接设 height 对 <select> 无效，因其顶部选中区与弹出菜单为独立渲染层；size 属性才是原生可控的行数控制方式；统一 box-sizing、font、padding 并禁用 appearance 可实现高度对齐；严格设计需求应改用自定义 DOM 结构。
为什么直接设 height 对 <select> 无效
因为浏览器把 <select> 当作“原子控件”：顶部可点击区域（选中区）和点击后弹出的菜单（popup）是两个独立渲染层。你写的 height: 40px 只可能压扁前者，而后者由操作系统或浏览器 UI 框架绘制，CSS 完全无法穿透。Chrome/Edge 尤其明显——看着高度变了，点开菜单还是默认行高、固定项数、甚至自动加滚动条。
size 属性才是原生可控的行数控制方式
size 是 <select> 的 HTML 原生属性，它直接告诉浏览器“显示几行选项”，不依赖 CSS，也不影响弹出菜单行为。适用于需要多行可见、但又不想引入 JS 或自定义组件的场景。
- 设
size="1"：回归传统下拉样式（仅显示当前选中项） - 设
size="4"：强制显示 4 行选项，超出部分自带滚动条 - 设
size后，multiple属性自动生效，即使没显式写 —— 用户可 Ctrl/Cmd 多选 - 注意：
size值为数字字符串，不能用 CSS 单位（如size="4px"会失效）
想让选中区和 <input> 高度对齐？必须统一盒模型和字体
常见错误是只设 height，结果在 Chrome 和 Firefox 中表现不一致。真正起效的是这一组组合：
- 统一
box-sizing: border-box：确保height包含padding和border - 显式声明
font-family和font-size：避免 select 因字体继承失败导致行高塌陷 - 禁用原生外观：
appearance: none（配合-webkit-appearance和-moz-appearance） - 重置内边距：
padding必须明确写，不要依赖浏览器默认值（Firefox 对padding解析更严格）
示例代码：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
立即学习“前端免费学习笔记（深入）”；
select, input[type="text"] {
height: 40px;
box-sizing: border-box;
padding: 8px 12px;
font-family: "Segoe UI", "Microsoft YaHei", sans-serif;
font-size: 14px;
border: 1px solid #ccc;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
真正自由控制高度？放弃原生 <select>，用 <div> + <ul> 模拟
当设计要求严格（比如下拉菜单最大高度 200px、每项行高 32px、hover 背景色、支持键盘导航），原生 <select> 就是死胡同。此时应完全接管 DOM 结构：
- 用
<div class="custom-select">包裹触发按钮和下拉列表 - 下拉内容用
<ul>，每项用<li>，所有尺寸、max-height、overflow-y: auto都可自由设置 - 关键点：
.custom-select ul设max-height: 200px并overflow-y: auto，但父容器.custom-select一定不能设height或min-height，否则破坏自适应 - JS 只需监听点击和键盘事件，更新选中状态和隐藏/显示逻辑，无需重写渲染
这个方案看似重，实则比反复调试原生 <select> 的兼容性更省时间，尤其在需要响应式或无障碍支持时。
