Google Chrome autofill removing background image

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>