根本原因是select与input的默认盒模型、内边距、边框、字体渲染逻辑天然不同；需同时设置box-sizing: border-box、appearance: none、flex容器对齐，并统一字体和重置样式。
下拉列表（<select></select>）和输入框高度不一致的根本原因
不是你没设 height，而是 <select></select> 的默认盒模型、内边距、边框、字体渲染逻辑和 <input type="text"> 天然不同。Chrome 和 Firefox 对 select 的 padding 解析差异尤其明显——比如同样写 padding: 8px 12px，Chrome 可能把下拉箭头区域也算进可点击区，而 Firefox 会压缩内容高度；更麻烦的是，select 不响应 line-height，强行设了也无效。
height + box-sizing: border-box 是基础但不够
只加 height: 40px 很容易失败，因为：
-
select默认box-sizing: content-box（老版 Safari/IE 尤其顽固），导致height不包含border和padding - 不同浏览器对下拉箭头的留白处理不一，有的自动加 2px 内边距，有的不加
- 若用了自定义字体（如
"PingFang SC"），select的字体继承可能失效，造成行高塌陷
必须显式重置：
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;
}
用 appearance 和 webkit-appearance 统一渲染基线
原生 select 在 macOS 和 Windows 上长得不一样，本质是系统控件渲染层干扰了 CSS 控制。关键一步是“剥掉外壳”：
- 加
appearance: none（标准属性）和-webkit-appearance: none（Chrome/Safari 必须） - 加
background: none防止系统箭头覆盖自定义样式 - 手动补一个右对齐的伪元素或图标按钮，否则右边会空一块
示例：
select {
appearance: none;
-webkit-appearance: none;
background: url("data:image/svg+xml,%3Csvg...%3E") no-repeat right 12px center / 12px auto;
}
真正对齐要靠父容器约束，而不是单个元素调参
即使上面都做了，如果 select 和 input 在文档流中是兄弟元素，仍可能因换行空白、vertical-align 默认值（baseline）不同而错位 1–2px。最稳做法是：
- 把它们包进同一个
display: flex容器，加align-items: center - 确保两者都设
margin: 0，避免浏览器默认 margin 干扰 - 禁用
float、vertical-align这类旧式对齐手段，它们和 flex 冲突
结构示例：
<div class="form-row"> <select><option>选项1</option></select><input type="text" placeholder="输入内容"> </div>
.form-row {
display: flex;
align-items: center;
gap: 8px;
}
.form-row select,
.form-row input {
margin: 0;
}
真正难的不是让高度数字相同，而是让浏览器放弃对 select 的特殊照顾——它不像普通元素那样听话，必须从渲染层、布局层、字体层三路同时压制。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
