CSS如何解决移动端输入框内阴影无法清除_设置appearance属性-css教程-PHP中文网

移动端输入框内阴影无法清除是因iOS Safari和部分安卓WebView对表单控件的默认渲染逻辑所致；需同时设置-webkit-appearance: none、appearance: none、border: 1px solid transparent、background-color: transparent、box-shadow: none、outline: none、padding及line-height才能彻底清除。

css如何解决移动端输入框内阴影无法清除_设置appearance属性

移动端输入框阴影为什么清不掉

iOS Safari 和部分安卓 WebView 会给自动加一层内阴影（尤其是聚焦时），即使写了 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+、微信内置浏览器实测有效：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

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）。这会导致文字贴边、上下留白不均，视觉上像有“内阴影”或“浮起感”。