Safari 中 input[type="reset"] 默认启用 -webkit-appearance: push-button，导致 CSS 样式失效；需用 -webkit-appearance: none 和 appearance: none 彻底重置，并手动设置 margin、padding、border 等。
是的，input[type="reset"] 在 iOS 和 macOS 的 Safari 中**默认带有原生系统样式**，包括圆角、阴影、内边距、字体加粗、甚至可能带蓝色高亮或金属质感，且这些样式无法通过常规 CSS（如 background、border）完全覆盖。
为什么 reset 按钮在 Safari 里不听你指挥？
Safari（特别是 WebKit 内核）对表单控件做了深度系统级渲染，input[type="reset"] 和 input[type="submit"]、button 一样，被赋予了 -webkit-appearance: push-button（或其他如 default-button）值。这个值会强制启用平台原生 UI 渲染逻辑，CSS 样式优先级被压制。
常见现象包括：
- 设置
background: red但按钮仍是灰色渐变 - 加了
border-radius: 0仍显示圆角 -
font-weight: normal无效，文字始终加粗 - iOS 键盘弹出时，按钮偶尔被自动缩放或错位
怎么彻底干掉 Safari 的 reset 默认样式？
核心操作只有一行关键声明：-webkit-appearance: none。但它必须配合其他重置项才能真正“归零”：
- 必须同时写上
appearance: none（现代标准属性，Safari 15.4+ 已支持） - 需手动重置
margin和padding，因为 WebKit 对input[type="reset"]有隐式内边距（比如 iOS 上默认约padding: 0.3em 1em） - 要显式声明
border，否则某些版本 Safari 会留一条细灰线 - 如果用了
font相关属性，建议加上-webkit-font-smoothing: antialiased避免文字发虚
推荐最小安全写法：
input[type="reset"] {
-webkit-appearance: none;
appearance: none;
margin: 0;
padding: 0.375em 1em;
border: 1px solid transparent;
background: #333;
color: white;
font: inherit;
cursor: pointer;
}
reset 按钮和其他 button 类型的兼容性差异
input[type="reset"] 在 Safari 中的行为比 button[type="reset"] 更顽固 —— 后者虽然也有默认样式，但 -webkit-appearance: none 生效更稳定；而前者在旧版 iOS（如 iOS 12–14）中偶现“部分重置失败”，比如圆角残留或点击反馈异常。
- 若项目需强兼容，可直接用
<button type="reset">重置</button>替代<input type="reset"> - 注意：两者提交语义一致，但
button允许子元素（如图标），input只能靠value属性设文本 - 不要只针对
reset写样式，建议统一处理：input[type="button"], input[type="submit"], input[type="reset"], button
真正麻烦的不是加一行 -webkit-appearance: none，而是它在不同 iOS 版本里生效程度不一 —— 有些要搭配 font-size: 100% 才压得住系统缩放，有些则要求父容器不能有 transform。实操时最好在真机上连着 iOS 15/16/17 都点一遍，别信模拟器。
