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

: This is how it is normal

But then with the autocomplete of chrome gets like this

This is how it is with the autocomplete

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

Hi there, I got the same issue. Have you found any solution for it? — Viktor Kukurba
– Viktor Kukurba, Commented Apr 11, 2016 at 9:34

Matteo Conta · Accepted Answer · 2017-03-20 09:37:25Z

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/

Collectives™ on Stack Overflow

Changing input background for Chrome autocomplete

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related