各浏览器对表单元素默认样式实现不同，需重置box-sizing、margin、padding等并统一font-family；select需三属性设appearance: none并自定义箭头；button须补全:hover/:active状态及outline以保可用性与可访问性。
为什么 input、select 在不同浏览器里长得不一样
因为各浏览器默认样式差异大：Chrome 给 input[type="number"] 加上下箭头，Safari 默认有圆角和内阴影，Firefox 的 textarea 右下角可拖拽，而 Edge 对 button 的 padding 处理又不同。这些不是 bug，是厂商对“表单语义”的不同实现理解。
重置不是为了消灭所有样式，而是把起点拉平——先砍掉干扰项，再统一加需要的样式。
- 用
* { box-sizing: border-box; }确保宽高计算一致 - 对
input、select、textarea、button单独重置margin、padding、border、font和appearance - 特别注意
appearance: none必须配合-webkit-appearance和-moz-appearance才能真正隐藏原生控件样式
appearance: none 用了但下拉箭头还在？
常见于 select 元素：只写 appearance: none 不够，Safari 和旧版 Chrome 会忽略它。
必须三者齐备：
立即学习“前端免费学习笔记（深入）”；
select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
/* 后续补一个自定义箭头或背景图 */
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M2 5l4 4 4-4z' fill='%23666'/></svg>");
background-repeat: no-repeat;
background-position: right 12px center;
padding-right: 32px;
}注意：background-image 中的 SVG 需 URL 编码，斜杠和引号要转义；padding-right 要留够空间放图标，否则文字被遮挡。
表单元素字体继承失效怎么办
很多 UI 框架或重置 CSS 会把 body 字体设为 system-ui，但 input、button 默认不继承 font-family，尤其在 Windows 上会回退到 Segoe UI，Mac 上变成 San Francisco，导致视觉割裂。
- 显式声明
font-family: inherit，而不是依赖继承链 - 如果项目用了自定义字体（如
"Inter", system-ui），直接复制过去：font-family: "Inter", system-ui, -apple-system, sans-serif; -
font-size和line-height也要同步设，避免textarea行高异常或文字贴边
重置后按钮点击无反馈？
清空 border 和 background 后，button 失去默认的 :active 状态样式，用户点下去没视觉反馈，体验像“点不动”。
必须手动补上伪类状态：
button {
border: 1px solid #d1d5db;
background-color: #fff;
transition: all 0.15s ease;
}
<p>button:hover {
background-color: #f9fafb;
border-color: #9ca3af;
}</p><p>button:active {
background-color: #e5e7eb;
transform: translateY(1px);
}别漏掉 transition 和 transform —— 前者让变化柔和，后者模拟按下凹陷感。没有这两条，交互依然显得生硬。
最易被忽略的是 outline：重置时很多人顺手写 outline: none，结果键盘 Tab 导航失去焦点指示，违反可访问性要求。应该用 outline: 2px solid #3b82f6 替代，或至少保留 :focus-visible。
