如何更好的去除谷歌浏览器中input自动填充背景？

input多是平时网页中使用最多的标签之一了，但凡须要输入的地方都少不了。 毕竟输入是一件比较麻烦的事情，因此浏览器也作出了许多便于输入的地方，比方说自动填充

通常状况下，在表单提交的时候浏览器会自动记录提交的内容

这个功能原本是很好的，不过当自动填充后，输入框背景会自动变成淡紫色（之前是x黄色，仅限谷歌浏览器），设计师（但凡是有点审美的前端）看到了确定就不干了，毕竟仍是挺违和的，那么何如去除这个默认的背景呢？

背景是如何产生的

按照以往的经验，若是要修改标签默认的样式，首先确定是查看标签的默认样式，以下

比较好理解，当自动填充时会激活:-internal-autofill-selected伪类，而后就变成了淡紫色。

若是咱们设置样式覆盖

input:-internal-autofill-selected{
    background: red!important;
}
复制代码

虽然样式覆盖了，然而并无什么用，仍然是默认的淡紫色（要是起做用的话就不会专门去研究这个了），缘由不明...

现有的解决方式

网上广泛的解决方式主要有两种：

1. 使用内阴影进行覆盖

既然背景改变不了，那么就找个东西覆盖呗

input{
    box-shadow: 0 0 0px 1000px white inset;
}
复制代码

大部分状况使用这种方式便可解决问题

2. 关闭自动填充功能

既然是因为自动填充致使的问题，关掉就好了呀

<input autocomplete="off">
复制代码

有些对信息比较敏感的状况下（不想自动填充）可使用这个功能

现有解决方式的局限

首先说第二种方式，虽然这种方式比较简单，可是却失去了自动填充功能，这对于用户体验是很不友好的（手动输入是一件费时费力的事情），若是说要自定义这个功能，那可能还须要很多的js脚本（还需考虑键盘访问），并且可能还会有意料以外的bug，因此通常状况下不建议去除默认功能。

那么第一种方式呢？若是输入框是纯色的背景，那么给一个和背景同样的阴影颜色就行了，若是而咱们设计须要的是一种透明的输入框，那基本就凉掉了。

好比相似这样的效果，若是被填充了仍是至关难看的

更好的解决方式

下面给出两种解决方式

方式一：利用background-clip: content-box

既然背景改变不了，那么就把它裁掉呗。

背景颜色默认是渲染到padding-box的，咱们能够设置background-clip: content-box只渲染到content-box，这样背景就看不到了（固然还需指定一下高度为0。）~

input{
  height: 0;
  padding: 1.2em .5em;
  background-clip: content-box;
}
复制代码

能够看到，自动填充时的背景已经消失了，不过还有一个小问题，填充的文字颜色也是没法直接修改的（默认为rgb(0,0,0)），缘由相同，这里咱们能够借助一下::first-line伪类

input::first-line{
  color: #fff
}
复制代码

应该算比较完美了~

查看这个demo

若是demo里面没有自动填充选项，能够先输入一些字符，而后submit，手动建立一些填充项，下同

方式二：利用animation-fill-mode:forwards

设置animation-fill-mode:forwards后，动画会一直停留在最后一帧，这个已经和默认的样式不是一个维度了，无论设置什么样式，都会保留最后一帧状态，好比

<style> div{ animation:resetBg .1s forwards; } @keyframes resetBg { to { background: blue; } } </style>
<div style="background:red!important">div</div>
复制代码

能够看到背景很轻易的就被改为了蓝色。

利用这个特性，上面的问题就很容易了，只需设置一个动画便可

input{
  animation: resetBg .1s forwards;
}
@keyframes resetBg {
  to {
    color: #fff;
    background: transparent;
  }
}
复制代码

效果也是立竿见影~

查看这个demo

小结

上面两种方式均实现了一样的效果，相比第一种方式，第二种对现有代码的改动最小，基本无反作用，无需改变原有尺寸，因此更推荐第二种方式，固然第一种方式的思路仍是值得推荐的，可能在其余场景很更适合。

若是有其余实现思路，欢迎在下方进行留言讨论，谢谢~