更改Chrome自动填充的输入背景 [英] Changing input background for Chrome autocomplete

问题描述

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

通常情况下就是这样

：

但是随着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之前放置背景：#fff .....，但仍然不起作用。
html代码在laravel中：

 < li> {{Form :: email（'email' ，''，array（'placeholder'=>'电子邮件'））}}< / li> 
< li> {{Form :: password（'password'，array（'placeholder'=>'Password'））}}< / li> 
  

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

解决方案

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

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

-webkit-box-shadow：0 0 0px 1000px white插图;指令涵盖所有背景，并且不能使用透明颜色。这就是为什么css图像风格不是解决方案的原因。

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

  / *更改Chrome中的自动填充样式* / 
输入：-webkit-autofill，
输入：-webkit-自动填充：hover，
输入：-webkit-autofill：focus 
输入：-webkit-autofill，
 textarea：-webkit-autofill，
 textarea：-webkit-autofill：hover 
 textarea：-webkit-autofill：focus，
选择：-webkit-autofill，
选择：-webkit-autofill：悬停，
选择：-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; 
转换：背景颜色5000s易于进出0s！重要; 
} 
  

在我的情况中，我还配置了边框，它们是overwrittem，隐藏在黄色自动填充框阴影颜色。

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

I have a specific background that uses an image but chrome messes it up. I know there's a way to change the color but I want to actually change the background, but how?

Normally it's like this

:

But then with the autocomplete of chrome gets like this

I have this css code for it

#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;         
}

The background immage still won't show up. The background is white and I've tried putting the "background:#fff....." before the "-webkit-box" but still didn't work. The html code is, in laravel:

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

So the question is, how do I override chrome's autocomplete background with that of mine? background:#fff url(../../img/site/username.png) no-repeat 12px center

解决方案

The only solution I found is to remove the icon from the background-image style and add an absolute positioned image on the left side of the input field.

This icon will be visible on the top of the autocomplete field, just configure the right z-index.

The "-webkit-box-shadow: 0 0 0px 1000px white inset;" instruction covers all the background and you can't use transparent color. This is the reason why the css image style isn't a solution.

I found a more complete style definition for the ::autofill pseudo-selector:

/* 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;
}

In my case I also configured the borders, they were overwrittem and hidden under the yellow autocomplete box-shadow color.

The source is https://css-tricks.com/snippets/css/change-autocomplete-styles-webkit-browsers/

这篇关于更改Chrome自动填充的输入背景的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！