Изменение фона ввода для автозаполнения Chrome

Question

У меня есть конкретный фон, который использует изображение, но хром это испортит. Я знаю, что есть способ изменить цвет, но я хочу изменить фон, но как?

Обычно это как этот

:

Но с автозаполнения хрома получает как этот

У меня есть этот CSS код для его

#email-field:-webkit-autofill, 
#pass-field:-webkit-autofill { 
    -webkit-box-shadow: 0 0 0px 1000px white inset; 
    background:#fff url(../../img/site/username.png) no-repeat 12px center;   
} 

фон immage все равно не появится. Фон белый, и я попытался поставить «background: #fff .....» перед «-webkit-box», но все равно не работал. HTML-код, в Laravel:

<li>{{ Form::email('email', '', array('placeholder' => 'E-mail')) }}</li> 
    <li>{{ Form::password('password', array('placeholder' => 'Password')) }}</li> 

Таким образом, вопрос, как я могу переопределить автозаполнения фон хром с, что мой? background: #fff url (../../ img/site/username.png) no-repeat 12px center

Answer 1

Единственное, что я нашел, это удалить значок из стиля фонового изображения и добавить абсолютное позиционированное изображение в левой части поля ввода.

Этот значок будет отображаться в верхней части поля автозаполнения, просто настройте правый индекс z.

«-webkit-box-shadow: 0 0 0px 1000px white inset;» инструкция покрывает весь фон, и вы не можете использовать прозрачный цвет. Вот почему стиль css-изображения не является решением.

Я нашел более полное определение стиля для :: автозаполнения псевдо-селектор:

/* Change Autocomplete styles in Chrome*/ 
input:-webkit-autofill, 
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus 
input:-webkit-autofill, 
textarea:-webkit-autofill, 
textarea:-webkit-autofill:hover 
textarea:-webkit-autofill:focus, 
select:-webkit-autofill, 
select:-webkit-autofill:hover, 
select:-webkit-autofill:focus { 
    border-bottom: 1px solid #ccc!important; 
    -webkit-text-fill-color: #707173!important; 
    -webkit-box-shadow: 0 0 0px 100px #fff inset!important; 
    transition: background-color 5000s ease-in-out 0s!important; 
} 

В моем случае я настроил границы, они были overwrittem и скрыты под желтым автозаполнения коробчатого цвета тени.

Источник https://css-tricks.com/snippets/css/change-autocomplete-styles-webkit-browsers/