移动端输入框内阴影无法清除是因iOS Safari和部分安卓WebView对表单控件的默认渲染逻辑所致；需同时设置-webkit-appearance: none、appearance: none、border: 1px solid transparent、background-color: transparent、box-shadow: none、outline: none、padding及line-height才能彻底清除。
移动端输入框阴影为什么清不掉
iOS Safari 和部分安卓 WebView 会给 <input type="text"> 自动加一层内阴影（尤其是聚焦时），即使写了 box-shadow: none、outline: none 也无效。这不是你 CSS 写错了，是浏览器对表单控件的默认渲染逻辑在作怪。
appearance: none 能直接去掉阴影吗
不能直接。设置 appearance: none 的作用是剥离浏览器默认样式（比如圆角、边框、背景色、内阴影等），但它本身不保证“彻底清除所有渲染残留”。尤其在 iOS 上，仅靠 appearance: none 常常不够，必须配合其他重置项才能真正生效。
- 必须同时设置
border: none或显式边框（否则 appearance 失效后可能露出底层边框） - 必须覆盖
background-color（iOS 默认有浅灰背景，会强化阴影感） - 必须重置
padding和line-height（原生控件的内边距会影响视觉阴影表现） - 某些版本需要加上
-webkit-appearance: none（Safari 旧版只认带前缀的）
完整可用的清除方案（含兼容写法）
下面这段 CSS 在 iOS 15+、Android Chrome 110+、微信内置浏览器实测有效：
input[type="text"],
input[type="search"],
input[type="password"] {
-webkit-appearance: none;
appearance: none;
border: 1px solid transparent;
background-color: transparent;
box-shadow: none;
outline: none;
padding: 8px 12px;
line-height: 1.4;
}
注意两点：
立即学习“前端免费学习笔记（深入）”；
- 用
border: 1px solid transparent替代border: none—— 某些 iOS 版本下none会触发回退到原生渲染，反而让阴影重现 - 如果用了
background-color: white，记得检查是否和父容器背景色一致，否则色差会“模拟出”阴影效果
为什么加了 appearance 还要调 padding 和 line-height
原生输入框的 padding 和 line-height 是由系统控制的，移除 appearance 后，这些值不会自动归零或继承，而是保留为 UA 样式中的默认值（比如 iOS Safari 给 input 设了 padding: 0.5em）。这会导致文字贴边、上下留白不均，视觉上像有“内阴影”或“浮起感”。
- 不重置
padding：文字离边框距离异常，容易误判为阴影 - 不统一
line-height：多行输入或字号变化时，光标位置偏移，看起来像内部有层遮罩 - 安卓部分 WebView 对
line-height计算不一致，建议用无单位数值（如1.4）而非px或em
border 的透明化处理和 line-height 的显式声明 —— 这两个点不补上，appearance 就等于白设。 
