css - 更改 Chrome 自动完成的输入背景

Question

我有一个使用图像的特定背景，但 chrome 把它弄乱了。我知道有一种方法可以更改颜色，但我想实际更改背景，但如何更改？

通常是这样

:

但是随着 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;         
}

背景图片仍然不会显示。背景是白色的，我试过将“背景:#fff .....”放在“-webkit-box”之前，但仍然没有用。在 laravel 中，html 代码是:

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

所以问题是，如何用我的背景覆盖 chrome 的自动完成背景？背景:#fff url(../../img/site/username.png) 无重复12px居中

Answer 1

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

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

“-webkit-box-shadow: 0 0 0px 1000px 白色插图；”说明覆盖了所有背景，您不能使用透明色。这就是为什么 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/