表单控件 width 不准的根本原因是浏览器默认盒模型不一致，必须全局设置 、::before、*::after 的 box-sizing: border-box，并配合 appearance: none、统一 padding 和 line-height 才能真正统一渲染。

为什么表单控件的 width 总是“不准”

因为 input、select、textarea 在 Chrome、Firefox、Safari 中默认使用不同盒模型：有的按 content-box 算宽高（padding + border 额外加），有的悄悄用 border-box 或混合策略。结果就是写 width: 100%，实际占位却各不相同，尤其嵌套在 flex 或 grid 容器里容易溢出或错位。

全局统一 box-sizing 的必要操作

只给表单元素单独设 box-sizing: border-box 不够——父容器、伪元素、甚至重置样式前的继承链都可能干扰。必须从根上堵住漏洞：

• *、*::before、*::after 三者一起设 box-sizing: border-box，覆盖所有潜在节点
• 避免用 html, body { box-sizing: border-box } 这种漏掉伪元素的写法
• 如果项目已用 Normalize.css，确认它没在后续规则里覆盖 box-sizing（某些旧版会重置回 content-box）

表单控件仍需额外重置的三个关键点

即使用了 border-box，原生表单控件还有三处“硬编码”差异必须手动干预：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• appearance: none 必须显式声明，否则 Safari 的 select 箭头、Chrome 的 number 按钮会撑开 padding 区域
• padding 不能省略——各浏览器默认值不同（Chrome input 是 1px 2px，Firefox 是 0），必须写死如 padding: 0.5rem 0.75rem
• line-height 和 font-size 要同步设置，否则文字在 input 里上下偏移，textarea 行高失真

textarea 和 select 的特殊处理

textarea 默认可拖拽缩放，select 的箭头位置不可控，这两者即使盒模型统一了，视觉和交互仍会破功：

立即学习“前端免费学习笔记（深入）”；

• textarea 加 resize: vertical 或 resize: none，防止用户拉扯破坏布局
• select 用 background + padding-right 留白模拟箭头区域，再配合 ::after 伪元素画自定义图标（注意 Safari 对 select::after 支持有限，得 fallback 到 wrapper 包裹）
• 别忘了 min-height 和 height 的组合——textarea 设 height 无效，必须靠 min-height 或 JS 动态控制

统一盒模型只是起点，真正一致要卡住 appearance、padding、line-height 这三条线；漏掉任意一条，border-box 就只是个安慰剂。