-webkit-appearance: none 是关键入口，因 iOS input 默认使用系统原生渲染，其阴影非 box-shadow 而是底层视觉层，必须先卸载原生样式才能接管绘制权；需配合 border: 0、outline: none 和 -webkit-tap-highlight-color: rgba(0,0,0,0) 才完整。
为什么 -webkit-appearance: none 是关键入口
iOS 的 <input> 默认使用系统原生渲染，阴影不是 box-shadow，而是底层控件自带的视觉层。直接写 box-shadow: none 完全无效，因为那根本没在控制它。只有先用 -webkit-appearance: none “卸载”掉原生样式，才能真正接管绘制权——后续的 border、background、outline 才开始生效。
-webkit-appearance: none 必须配合哪些声明才完整
单加 -webkit-appearance: none 往往不够，容易漏掉三个常见残留：
-
border：iOS 原生 input 有默认边框，需显式设为border: 0或border: 1px solid transparent -
outline：聚焦时的高亮环，必须加outline: none -
-webkit-tap-highlight-color：点击瞬间的灰色蒙层，建议设为rgba(0,0,0,0)或transparent
推荐组合写法：
input, textarea {
-webkit-appearance: none;
border: 0;
outline: none;
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
加了 -webkit-appearance: none 后输入框变“扁平”或失焦延迟怎么办
这是真实副作用，不是错觉：
立即学习“前端免费学习笔记（深入）”；
- 部分 iOS 版本（尤其是 iOS 15+）在移除原生外观后，会弱化焦点响应逻辑，导致连续点击多个 input 时，光标跳转略慢
- 失去原生圆角和内边距，需要手动补
border-radius和padding，否则看起来像被“压扁”了 - 某些微信 WebView（尤其旧版）对
-webkit-appearance: none支持不稳，可能触发失焦后页面卡住不回弹
应对建议：
- 始终搭配
padding（如padding: 8px 12px）和border-radius（如4px）还原基础可用性 - 微信内若出现失焦卡顿，可监听
blur事件并加setTimeout(() => window.scrollTo(0, 0), 0)强制刷新滚动位置
原生 Swift / UIKit 场景下别误用 CSS 方案
如果是在纯 iOS 原生开发（非 Webview），-webkit-appearance 完全不起作用。此时要操作的是 UITextField.layer 属性：
textField.layer.shadowOpacity = 0textField.layer.shadowColor = UIColor.clear.cgColortextField.layer.shadowOffset = .zerotextField.layer.shadowRadius = 0
注意：这些只影响 layer 自身阴影；如果阴影来自 borderStyle = .roundedRect 的内部描边效果，则应改用 .none 并自行画 border。
