Chrome's autofill hiding text input's background image Chrome's autofill hiding text input's background image google-chrome google-chrome

Chrome's autofill hiding text input's background image


What you need is:

move background image from <input> element

HTML

<div class="email-wrapper">  <input type="text" placeholder="Email" name="email" id="email" /></div>

CSS

.email-wrapper {  display: inline-block;  background: url(https://www.apec-econ.ca/system/style/images/icon-small-person.png) no-repeat scroll 4px 9px;}

and postpone changing of background-color when autofill

CSS

input:-webkit-autofill {  transition: background-color 5000s ease-in-out 0s;}

Updated your fiddle: https://jsfiddle.net/65wkgqs0/6/