Fix Google Chrome Background Image for AutoComplete

Question

When I write an email in the email field, I have no problem and it displays perfectly. But when google chrome decides autocomplete, the image on the left will be deleted. http://s9.postimg.org/suz3z56f3/Sem_t_tulo.jpg

I read several topics about hacking this yellow background, which works, but the image continues to fade.

input:-webkit-autofill { -webkit-box-shadow: 0 0 0 1000px white inset; } 

// html

 <input type='email' class='email' placeholder='email'/> 

// css

 .email{ background-image: url('http://www.letsgocook.net/sites/default/img/email.png'); background-repeat: no-repeat; padding-left: 35px; } 

http://jsfiddle.net/9AM6X/ >, but doesn’t show an error, because I cannot replicate chrome auto-complete in jsfiddle.

Answer 1

It is very inconvenient to use background images for text fields. you can change your HTML markup

HTML

 <div class='icon'></div> <input type='email' class='email' placeholder='email'/> 

CSS

 .email { border:1px solid black; padding-left: 5px; float:left; border-left:none; outline:none ; margin-left:-3px } .icon { background-image: url('http://www.letsgocook.net/sites/default/img/email.png'); background-repeat: no-repeat; background-position:center center ; float:left; width:30px; height:18px; margin-top:2px; border:1px solid black; border-right:none } 

I updated the code: jsFiddle

Answer 2

Sets the image back using keyframes:

 @-webkit-keyframes autofill { to { background-image:url(images/your-input-bg-image.svg); } } input:-webkit-autofill { -webkit-animation-name: autofill; -webkit-animation-fill-mode: both; } 

Kudos to @Steve for his response to Removing the input background color for Chrome auto-complete?

Answer 3

I post the solution here essentially as a hack / workaround for the problem described.

Using additional elements, we can place the icon on the input element.

Previe w: http://output.jsbin.com/necigedago

Working example:

CSS

 .control { position: relative; } .email { padding-left: 35px; padding-top: 10px; padding-bottom: 10px; font-size: 16px; } .email ~ .input-icon { background-image: url('http://www.letsgocook.net/sites/default/img/email.png'); background-repeat: no-repeat; background-size: 100%; background-position: center center; width: 22px; height: 14px; position: absolute; left: 8px; bottom: 0; top: 0; margin: auto; } 

HTML

  <p class='control'> <input type='email' class='email' placeholder='email'/> <span class='input-icon'></span> </p> 

Answer 4

The only option is to remove the indentation where the background image would be in webkit, but you can style as such:

 /* CHROME ISSUE W/ YELLOW BG */ input:-webkit-autofill#username, input:-webkit-autofill#usernameId_new, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active { -webkit-text-fill-color: #646464 !important; -webkit-box-shadow: 0 0 0px 1000px #fff inset; -webkit-padding-start: 8px !important; } 

The image will still work for IE, FF, etc., but for chrome there will be more.

Best -

Answer 5

You just need to add autocomplete="off" in the input field and this will solve the problem. I tried this and it works.

Answer 6

I have found the best solution for this.

For new versions of Chrome, you can simply put autocomplete="new-password" in the password field and it. I checked it works fine.

Answer 7

Use animation to solve this issue - the most useful way!

Kudos to @wkille for his answer: https://stackoverflow.com/a/212877/

You can set the animation like this:

 @keyframes clearAutofill { to { background: 'Your-code'; } /* eg background: url('./img/example.png') 0 0 no-repeat #fff; */ } input:-webkit-autofill { animation: clearAutofill forwards; /* 'animation-fill-mode: forwards' can keep the style you set. */ }