iOS Safari输入框无法去除阴影是因WebKit强制应用内阴影且CSS无法直接覆盖；需同时设置-webkit-appearance: none、background-color、border、box-shadow和outline才能彻底禁用。
iOS Safari输入框为什么会有无法去除的阴影？
iOS Safari（特别是15.4+）对 和 默认应用了内部阴影（box-shadow: 0 0 5px rgba(0,0,0,.2)），即使你写了 box-shadow: none 也无效——这是WebKit内核对表单控件的“用户代理样式强制覆盖”，不是普通CSS能直接覆盖的。
appearance: none 能直接去掉阴影吗？
不能。单独写 appearance: none 只会移除默认外观（如圆角、边框、背景色），但iOS Safari仍会保留其私有渲染层里的内阴影逻辑。必须配合其他重置项才能生效：
-
-webkit-appearance: none是必需的（注意带前缀） - 必须显式设置
background-color（哪怕是transparent），否则阴影残留 - 必须覆盖
border（哪怕设为0或none），否则部分iOS版本仍透出阴影边缘 - 推荐加上
outline: none防止聚焦时叠加新阴影
完整最小化写法：
.input-reset {
-webkit-appearance: none;
appearance: none;
background-color: transparent;
border: 0;
box-shadow: none;
outline: none;
}
为什么加了 appearance: none 还有阴影？常见漏项
最常被忽略的是 background-color —— iOS Safari在 appearance: none 后，若未声明背景，会回退到系统默认浅灰背景 + 内阴影组合，视觉上就像阴影“粘”在文字后面。另外两个典型漏项：
- 没写
-webkit-appearance: none（仅写标准appearance在旧版iOS Safari中完全不生效） - 父容器或伪元素（如
::before）意外设置了filter: drop-shadow()，误以为是输入框自身阴影 - 使用了
border-radius但没配overflow: hidden，导致阴影溢出边框可见
需要兼容老iOS版本（如iOS 12–14）怎么办？
这些版本对 appearance 支持更弱，且阴影逻辑更顽固。建议增加一层防御性重置：
- 用
-webkit-box-shadow: none（虽冗余但部分旧版需此） - 对
input[type="text"]单独加font-size: 16px（小于16px时iOS会强制缩放并触发额外渲染层，连带阴影变形） - 避免在输入框上用
transform或will-change，可能激活硬件加速层，让阴影渲染异常
最终稳定写法建议带上所有关键属性：
input[type="text"],
textarea {
-webkit-appearance: none;
appearance: none;
-webkit-box-shadow: none;
box-shadow: none;
background-color: #fff; /* 不用 transparent，更稳妥 */
border: 1px solid #ddd;
outline: none;
font-size: 16px;
}
真正起效的关键不在“去掉阴影”这个动作本身，而在于让iOS Safari放弃对输入框的特殊渲染路径——这需要同时切断它的外观、背景、边框和焦点反馈四个钩子。少一个，阴影就可能以某种形式回来。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
