Google Chrome autofill removing background image - html

Question

When I write in the email box the email, I have no problem and displays perfectly.
But when google chrome decides to autofill, the image on the left is removed.
http://s9.postimg.org/suz3z56f3/Sem_t_tulo.jpg
I've read some topics about hacking that yellow background, which works, but the image continues to disappear.
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/ > example, but no showing the error because I can't replicate the autofill of chrome in jsfiddle.

Answer 1

Puts 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 answer to Removing input background colour for Chrome autocomplete?

Answer 2

I'm posting a solution here, essentially as a hack / workaround for the problem described.
Using extra elements we can place the icon on the input element.
Preview: 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 3

It is very inconvenient practice to use background images for textboxes. 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 have updated the code: jsFiddle

Answer 4

Only option is to remove the padding where the background image would have been 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 will overide.
Best-

Answer 5

Use animate to solve this matter is the most useful way!
kudos to #wkille for his answer: https://stackoverflow.com/a/51874418/11720087
You can set a animation like this:
#keyframes clearAutofill {
to { background: 'Your-code'; }
/* e.g 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. */
}

Answer 6

I found a better solution to this.
For new Chrome versions, you can just put autocomplete="new-password" in your password field and that's it. I've checked it, works fine.

Answer 7

You just need to add autocomplete="off" to your input field and this will solved the issue. I tried it and it works.

Answer 8

I found another solution which should solve the problem using JavaScript. Add the onchange to your input element, and use following function. I'm using this along with the CSS rules input:focus:invalid and input:required:valid to show different background images based on if the input is valid or not valid.
Works in Chrome and Firefox, but not for Safari it seems :(
CSS:
input:required:valid {
background: url("IMAGE_PATH_HERE") no-repeat right;
background-size: 25px;
border: 3px solid green;
}
input:focus:invalid {
background: url("IMAGE_PATH_HERE") no-repeat right;
background-size: 25px;
border: 3px solid red;
}
HTML:
<input type="text" name="name" id="name" autocomplete="name" onchange="fixAuto(this)" required>
JavaScript:
/**
* Adds background image to input fields if they are removed by the browser.
*
* #param element An input HTML element.
*/
function fixAuto(element) {
setTimeout(() => {
// Store the current value of the input field
let value = element.value;
// Store the element itself
let input = document.getElementById(element.id);
// Change the input fields value
input.value = value;
}, 0);
}