更改Chrome自动填充的输入背景

Question

我有一个特定的背景，使用图像，但铬混淆了它。我知道有一种方法可以改变颜色，但我想实际改变背景，但是怎么样？

通常情况就是这样

：

但随后chrome的自动完成就像这样

我有这个css代码

#email-field:-webkit-autofill,
#pass-field:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px white inset;
     background:#fff url(../../img/site/username.png) no-repeat 12px center;         
}

背景图像仍然不会显示出来。背景是白色的，我尝试在“-webkit-box”之前加上“background：#fff .....”，但仍然无效。 html代码是laravel：

   <li>{{ Form::email('email', '', array('placeholder' => 'E-mail')) }}</li>
   <li>{{ Form::password('password', array('placeholder' => 'Password')) }}</li>

所以问题是，我如何用我的那个覆盖chrome的自动完成背景？ 背景：#fff url（../../ img / site / username.png）no-repeat 12px center

Answer 1

我找到的唯一解决方案是从背景图像样式中删除图标，并在输入字段的左侧添加绝对定位图像。

此图标将显示在自动填充字段的顶部，只需配置正确的z-index。

＆＃34; -webkit-box-shadow：0 0 0px 1000px白色插图;＆＃34;说明涵盖了所有背景，您无法使用透明色。这就是为什么css图像样式不是解决方案的原因。

我为:: autofill伪选择器找到了更完整的样式定义：

/* Change Autocomplete styles in Chrome*/
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus
input:-webkit-autofill, 
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  border-bottom: 1px solid #ccc!important;
  -webkit-text-fill-color: #707173!important;
  -webkit-box-shadow: 0 0 0px 100px #fff inset!important;
  transition: background-color 5000s ease-in-out 0s!important;
}

在我的情况下，我还配置了边框，它们是覆盖并隐藏在黄色自动完成框阴影颜色下。

来源为https://css-tricks.com/snippets/css/change-autocomplete-styles-webkit-browsers/