Changing input background for Chrome autocomplete

Question

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

Answer 1

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/