去除Chrome中input框自动填充的黄色背景

[liuyib]

Chrome 中的 input 如果没有禁用 autocomplete 属性的话，就会自动填充内容以及黄色背景。如下图：

有时候这个黄色背景的颜色并不是我们想要的。需要去除或者更换颜色。

这个小小的问题看似简单，但想要完美解决是没那么容易的。

---

1、box-shadow 覆盖

一行很简单的代码：

box-shadow: 0 0 0 1000px #fff inset;

效果如下：

这样虽然很简单的去除了自动填充时的黄色背景，但是如果 input 框需要半透明背景时，这种方法就不行了。

可以去这里自行体验下：http://www.w3school.com.cn/tiy/t.asp?f=html5_input_autocomplete

2、background-clip + height

在 Chrome 中，通过开发者工具可以看到，这个黄色背景是下面这些代码导致的：

input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill {
  background-color: rgb(250, 255, 189) !important;
  background-image: none !important;
  color: rgb(0, 0, 0) !important;
}

所以这个黄色填充本质就是背景颜色，我们可以这样去除：

background-clip: content-box;
height: 0;
padding: 10px 0;

background-clip 就是设置元素的背景色延伸到哪个地方，有四个常用的值：

• border-box - 延伸到边框 border 外围
• padding-box - 延伸到内边距padding 外围
• content-box - 延伸到内容边界
• text - 只作用于文本

这里就是让背景色延伸到 内容边界，然后设置元素高度为零。再用 padding 挤出 input 的高度即可。

关于 background-clip 属性的详细使用，可以翻阅：MDN: background-clip

到此黄色填充就完美解决了。

---

原文链接: https://juejin.im/post/5c5a7eebf265da2da67c068d