CSS如何为表单输入控件统一样式盒模型_强制将所有input/textarea/select的box-sizing重置-css教程-PHP中文网

表单控件默认 box-sizing 不统一，需同时重置 padding、border 和 font 相关属性才能使 border-box 生效；推荐使用 rem 单位的 padding、显式 border 及系统字体，并设置 vertical-align: middle 解决对齐问题。

css如何为表单输入控件统一样式盒模型_强制将所有input/textarea/select的box-sizing重置

为什么表单控件默认box-sizing不统一

浏览器对 input、textarea、select 的默认 box-sizing 值不一致：Chrome/Firefox 给 input[type="text"] 和 textarea 设为 content-box，但部分系统控件（如 select 在旧版 Safari）可能表现得像 border-box；更麻烦的是，某些 UA 样式会额外加 padding 或 border，导致 width 计算结果不可控。

直接写 box-sizing: border-box 不总生效，因为原生控件的 UA 样式优先级高，尤其在未重置其他属性时。

必须连带重置的三个关键属性

只改 box-sizing 是无效的。这些控件的尺寸受三者共同影响：padding、border、font 相关属性。UA 样式常给 input 加 2px padding、1px border，还依赖系统字体度量，导致 height 计算漂移。

必须显式声明 padding（哪怕设为 0），否则 UA 的 padding 会干扰 border-box 行为
必须声明 border（至少是 border: 1px solid transparent），否则某些浏览器在 border-box 下仍按 content-box 渲染 height
建议同步设置 font-family 和 font-size，避免因字体度量差异导致行高/高度不一致

最简且兼容的重置写法

以下规则能覆盖所有主流浏览器（Chrome 80+、Firefox 75+、Safari 14+、Edge 90+），且不会破坏可访问性：

CSS工具箱(专业版)

全功能 CSS 工程手册，覆盖性能优化、无障碍、设计系统与跨浏览器兼容。

下载

input,
textarea,
select {
  box-sizing: border-box;
  padding: 0.375rem 0.75rem;
  border: 1px solid #d1d5db;
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 1rem;
  line-height: 1.5;
}

注意点：

padding 值推荐用 rem，避免缩放时失衡；数值来自主流设计系统（如 Tailwind 的 px-3 py-2）
不要用 height 固定值——它和 padding+border+line-height 冲突，易引发垂直居中错位
若需禁用默认 focus outline，用 outline: 2px solid transparent 替代 outline: none，保留键盘可访问性