Google Chrome autofill removing background image

css, google-chrome, html

Solution

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

Problem

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.

Original source

Related problems