自动填充输入 CSS 时删除背景

在前端开发中，我们经常需要为输入框添加自动填充功能，以提高用户操作的效率。不过，常常会出现填充的内容与输入框样式冲突的情况。本文将介绍如何使用 CSS 删除填充内容的背景。

背景

当浏览器自动填充输入框时，会自动添加背景颜色或图片，以提示用户该输入框已经自动填充。这些背景通常比较难以去除，导致输入框的样式被破坏。因此，需要一种方法来删除自动填充背景。

解决方法

input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px white inset;
}

可以通过给 input 添加伪类 :-webkit-autofill 来控制自动填充的样式。上述代码将删除自动填充的背景，同时添加一个白色的背景以保持输入框的样式。

注意，这种方法仅适用于 WebKit 内核的浏览器。

兼容性

虽然该方法在 WebKit 内核的浏览器中表现优异，但在其他浏览器可能会有兼容性问题。需要对应不同浏览器支持的前缀，下面是最全的写法：

/* 适用于所有浏览器的自动填充样式 */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:active,
input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px white inset;
  -webkit-text-fill-color: #333;
  transition: background-color 5000s ease-in-out 0s;  /* webkit */
  transition: color 9999s ease-out; /* 其他浏览器 */
}

结论

在进行自动填充输入框的样式控制时，需要注意 background-color 的优先级问题。如果要保持输入框的样式，需要在伪类 :-webkit-autofill 中使用 -webkit-box-shadow 处理背景，并控制文本颜色的色值。同时，需要对不同浏览器进行兼容性处理。

以上是本文对自动填充输入 CSS 时删除背景的介绍，希望能对前端开发者有所帮助。