必须加-webkit-appearance: none，否则iOS Safari中border-radius对button等原生表单控件无效；需同时补全border、padding、line-height等基础样式，并覆盖input[type="button"]、button、textarea、select等元素。
-webkit-appearance: none 是解决 iOS Safari 下按钮默认样式最直接有效的方式。不加这句，哪怕写了 border-radius: 0、background: #ff0000、border: none，iOS 仍会强行套上圆角、内阴影、浅灰蒙层甚至高亮反馈——这不是 bug，是 WebKit 的渲染策略。
哪些元素必须加 -webkit-appearance: none
不是所有按钮都“自动中招”，但以下几类在 iOS Safari 中默认启用原生 UI 渲染，必须显式重置：
-
input[type="button"]、input[type="submit"]、input[type="reset"] -
button元素（包括） -
textarea（否则会出现圆角+内边距膨胀） -
select（下拉箭头和背景色无法通过常规 CSS 覆盖）
漏掉任意一类，就可能在某处突然出现“不听你话”的按钮。
-webkit-appearance: none 后必须补的样式
重置外观 ≠ 样式归零。移除原生渲染后，部分基础表现会退化，需手动补全：
-
outline: 0或outline: none：防止点击/聚焦时出现难看的蓝色外框 -
border: 1px solid transparent（推荐）：避免某些 iOS 版本因 border 缺失导致高度塌陷 -
background-color: transparent或明确指定色值：否则部分机型显示为纯白或半透明灰 -
font-size: inherit和line-height: inherit：保持与父容器文字流一致，避免 iOS 自行缩放
只写 -webkit-appearance: none 不补这些，反而容易引发新问题，比如按钮“变矮了”或“点不动”。
为什么 border-radius: 0 单独无效
iOS Safari 对 input[type="submit"] 等元素的圆角控制不在 border-radius 层级，而是在更底层的渲染管线里。它把整个按钮当做一个系统控件来绘制，CSS 圆角只是“贴图层”，覆盖不了底层形状。这也是为什么开发者常误以为自己写错了 border-radius，其实根本没走到那一步。
验证方法很简单：打开 Safari 开发者工具（连真机调试），选中按钮元素，查看 computed 样式里的 appearance 值——如果还是 button 而非 none，说明 -webkit-appearance: none 没生效（常见于选择器权重不足或被更高优先级规则覆盖）。
兼容性与现代替代方案
-webkit-appearance 是 WebKit 专属前缀属性，目前仍无标准替代方案。Chrome / Edge 基于 Blink，也支持该属性；Firefox 则用 appearance: none（无前缀），但 iOS Safari 必须带 -webkit- 前缀才认。
注意两点：
- iOS 15.4+ 开始，
button元素在部分场景下对-webkit-appearance: none的响应更严格，建议搭配display: inline-block或display: block显式声明布局行为 - 不要依赖
normalize.css或reset.css自动处理——多数版本仅重置表单元素的 margin/padding，不碰appearance
真正容易被忽略的，是 textarea 和 select 这两个“看起来不像按钮”的元素，它们同样受 -webkit-appearance 控制，且一旦遗漏，调试成本远高于按钮本身。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
