-webkit-appearance: none 是必须的第一步，它强制卸载 UIKit 原生渲染层，使 input 切入标准 DOM 渲染路径；漏掉此步，后续 box-shadow: none 等样式均无效。
-webkit-appearance: none 是必须的第一步
只写 appearance: none 在 iOS 15.4 及更早版本中完全不生效，-webkit-appearance: none 才是 Safari 实际识别的唯一入口。它不是“去掉阴影”的操作，而是强制卸载 UIKit 原生渲染层，让 input 切换到标准 DOM 渲染路径——只有这时，你写的其他 CSS 才真正开始起作用。
漏掉这一步，后面所有 box-shadow: none、border-radius: 0 都是在对空气调样式。
box-shadow: none 为什么经常失效
iOS 输入框的“内阴影”根本不是 CSS 的 box-shadow，而是 WebKit 内核私有渲染层自带的视觉效果，和标准 box-shadow 属于两个平行世界。DevTools 里看到 box-shadow 被划掉，不代表它没在起作用——那个阴影压根没挂在这个属性上。
-
box-shadow: none只影响标准 DOM 渲染路径下的投影，原生控件不走这条路 - 部分 iOS 版本（如 15.4+）甚至在 UA 样式里硬编码了
box-shadow: 0 0 5px rgba(0,0,0,.2)，且优先级高于开发者样式 - 真正要干掉它，必须先用
-webkit-appearance: none切换渲染模式，再补box-shadow: none和-webkit-box-shadow: none（旧 WebView 只认带前缀的）
必须同步重置的四个关键项
只加 -webkit-appearance: none，大概率出现“阴影没了但文字贴边、背景发灰、聚焦高亮乱叠”的情况——这不是 bug，是 UA 默认值暴露出来了。以下四项缺一不可：
立即学习“前端免费学习笔记（深入）”；
-
background-color: transparent：iOS 默认浅灰背景会和残留阴影叠加，强化“阴影感” -
border: 1px solid transparent：不能用border: none，某些版本会触发回退到原生渲染，阴影复现 -
outline: none：聚焦时的高亮环若不清除，会和原有内阴影混成“双层阴影” -
padding: 8px 12px; line-height: 1.4;：原生 UA 样式中padding是0.5em，移除 appearance 后不重置会导致文字上下留白异常，视觉上像“浮起阴影”
老 iOS 和微信 WebView 的兼容补丁
iOS 12–14 和微信 8.0.30 以下版本对 -webkit-appearance: none 支持不稳定，容易失焦卡顿或阴影残留。防御性写法建议加：
-
-webkit-box-shadow: none：冗余但必要，部分旧 WebView 只认这个前缀 -
font-size: 16px：小于 16px 时 iOS 会强制缩放并激活额外渲染层，连带阴影变形或复现 -
-webkit-tap-highlight-color: rgba(0,0,0,0)：点击瞬间的灰色蒙层常被误认为是输入框自身阴影 - 若失焦后页面不回弹，需监听
blur事件加setTimeout(() => window.scrollTo(0, 0), 0)
最常被忽略的不是代码写错，而是把父容器、伪元素或 filter: drop-shadow() 造成的视觉干扰，误判成 input 自身阴影——先检查这些地方，再动 input 样式。
