Google Chrome автозаполнение удаляет фоновое изображение

Question

Когда я напишу в почтовом ящике письмо, у меня нет проблем и отображается отлично. Но когда google chrome решает автозаполнение, изображение слева удаляется. http://s9.postimg.org/suz3z56f3/Sem_t_tulo.jpg

Я прочитал несколько тем о взломе этого желтого фона, который работает, но изображение продолжает исчезать.

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/> пример, но не показывает ошибку, потому что я не могу повторить автозаполнение хрома в jsfiddle.

Answer 1

Практически неудобно использовать фоновые изображения для текстовых полей. Вы можете изменить ваш HTML разметки

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 
} 

Я обновил код: jsFiddle

Answer 2

опция только для удаления отступов, где фоновое изображение было бы в webkit, но вы можете стиль как таковой :

/* 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; 
} 

Изображение будет по-прежнему работать для IE, FF и т. Д., Но для хром будет преобладать.

Best-

Answer 3

Я нашел лучшее решение для этого.

Для новых версий Chrome вы можете просто положить autocomplete="new-password" в свое поле пароля и все. Я проверил его, отлично работает.

Answer 4

Я размещаю решение здесь, по существу, как хак/обходной путь для описанной проблемы.

Используя дополнительные элементы, мы можем поместить значок на элемент ввода.

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

Рабочий пример:

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>