如何更好地删除谷歌浏览器中的输入自动填充背景？

input可能是网页中使用频率最高的标签之一，但是在所有需要输入的地方都少不了它。毕竟输入是一件比较麻烦的事情，所以浏览器也做了很多方便输入的地方，比如autofill。一般来说，提交表单时，浏览器会自动记录提交的内容。这个功能很好。是的，但是自动填充后，输入框的背景会自动变成淡紫色（以前是x-yellow，只针对谷歌浏览器），设计师（任何有点美感的前端）肯定会看到它就停止做。毕竟还是挺违和的，那这个默认背景怎么去掉呢？背景是如何生成的根据以往的经验，如果要修改标签的默认样式，首先要勾选标签的默认样式。如下更容易理解。自动填充的时候会激活：-internal-autofill-selected伪类，然后变成淡紫色。如果我们设置样式覆盖input:-internal-autofill-selected{background:red!important;}，样式虽然覆盖了，但是没用，还是默认的淡紫色（如果能用，我们就不研究了具体是这个），原因不详...现有解决方案网上常见的解决方案有两种：1.用内阴影遮住既然不能改变背景，那就找东西遮住input{box-shadow:000px1000pxwhiteinset;}在大多数情况下，使用这种方法可以解决问题2.关闭自动填充功能既然是自动填充引起的问题，那么关闭它即可。一些对信息比较敏感的如果不想自动填写，可以使用这个功能。现有方案的局限性首先说说第二种方式。这种方式虽然比较简单，但是失去了自动填充功能，对用户体验很不友好（手动输入是一件费时费力的事情），如果要自定义这个功能，可能需要大量的js脚本（也需要键盘访问），并且可能会出现意想不到的错误，因此一般情况下不建议删除默认功能。那么第一种方式呢？如果输入框有一个纯色背景，那么给它一个与背景相同的阴影颜色就足够了。如果我们设计需要的是一个透明的输入框，那基本就凉凉了。比如像这样一个效果，如果是填充的，就比较丑了。下面给出一个更好的解决方案。下面给出两种解决方案。一：使用background-clip:content-box既然背景不能改，那就剪掉吧。默认情况下，背景颜色呈现给填充框。我们可以设置background-clip:content-box只渲染到content-box，这样背景就看不到了（当然需要指定高度为0）~input{height:0;填充：1.2em.5em；background-clip:content-box;}可以看到自动填充的时候背景已经消失了，但是还有一个小问题，填充的文字颜色不能直接修改（默认是rgb(0,0,0)),道理是一样的，这里我们可以使用::first-line伪类input::first-line{color:#fff}应该算是完美了吧~https://codepen.io/xboxyan/pen/VwYKJzR如果demo中没有自动填充选项，可以先输入一些字符，然后提交，手动创建一些填充项，同下方法二：使用animation-fill-mode:forwards设置animation-fill-mode:forwards之后，动画会一直停留在最后一帧，不再与默认样式同维度。无论设置什么样式，都会保持上一帧的状态，比如div