仅写 appearance: none 无法去除 iOS 输入框内阴影，必须使用 -webkit-appearance: none 并同步设置 background-color: transparent、border: 1px solid transparent、outline: none 和 -webkit-tap-highlight-color: rgba(0,0,0,0)，否则阴影残留或引发交互异常。
直接说结论：仅写 appearance: none 无法去除 iOS 输入框内阴影，必须搭配 -webkit-appearance: none 及至少四项重置声明，否则阴影照常出现，甚至引发点击失效或文字错位。
为什么 -webkit-appearance: none 是强制前提
iOS Safari 的 默认走系统原生渲染路径，其“内阴影”不是 box-shadow，而是 UIKit 控件自带的视觉层。你写的 box-shadow: none 根本没机会生效——浏览器压根没用 CSS 渲染它。只有先用 -webkit-appearance: none 卸载掉这层原生皮肤，后续样式才真正接管绘制权。
注意：appearance: none（无前缀）在 iOS 15.4 之前完全不生效，只写这个等于白干；-webkit-appearance: none 才是 Safari 实际认的唯一可靠入口。
必须同步重置的四个关键属性
漏掉任意一项，阴影都可能以不同形式残留：
-
background-color: transparent—— 不设背景色时，iOS 会回退到浅灰底 + 内阴影组合，视觉上就像阴影“粘”在文字后 -
border: 0或border: 1px solid transparent—— 某些 iOS 版本下border: none会触发原生渲染回退，反而让阴影重现；用transparent边框更稳妥 -
outline: none—— 聚焦时的高亮环若未清除，会叠加一层新阴影，和原有内阴影混在一起更难分辨 -
-webkit-tap-highlight-color: rgba(0,0,0,0)—— 点击瞬间的灰色蒙层不关掉，调试时容易误判为阴影
为什么还要调 padding 和 line-height
原生输入框的 padding 和 line-height 由系统控制（比如 iOS Safari 给 input 设了 padding: 0.5em），移除 -webkit-appearance 后，这些值不会自动归零，而是保留 UA 默认值。结果就是文字贴边、上下留白不均，视觉上像有“浮起感”或“内阴影”。
推荐起步值：
padding: 8px 12px;<br>line-height: 1.4;
别用 em 或 rem 做单位——iOS 在某些缩放场景下会重新计算，导致留白突变。
老 iOS 版本（12–14）的兼容性补丁
这些版本对 appearance 支持更弱，阴影逻辑也更顽固，需加两道防御：
- 补
-webkit-box-shadow: none：虽冗余，但部分旧 WebView 只认这个前缀 - 强制
font-size: 16px在input[type="text"]上：小于 16px 时 iOS 会触发强制缩放，连带激活额外渲染层，阴影可能复现或变形
另外，检查父容器是否用了 overflow: hidden——Safari 对它的裁切比 Chrome 更激进，box-shadow 极易被砍掉；临时调试可先设为 visible 确认是不是它在作祟。
真正卡住人的不是属性本身，是 Safari 把表单控件当操作系统 UI 组件来管：你改样式，它先问系统同不同意。每次调阴影，本质是在跟两层渲染逻辑打架。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
