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

Когда я напишу в поле электронной почты письмо, у меня нет проблем и отображается отлично. Но когда 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.

Ответы

Ответ 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

Ответ 2

Устанавливает изображение обратно, используя ключевые кадры:

@-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;
}

Престижность @Steve для его ответа на Удаление входного цвета фона для автозаполнения Chrome?

Ответ 3

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

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

Previe w: 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>

Ответ 4

Только опция - удалить отступы, где фоновое изображение было бы в 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 -

Ответ 5

Вам просто нужно добавить autocomplete="off" в поле ввода, и это решит проблему. Я попробовал это, и это работает.

Ответ 6

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

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

Ответ 7

Используйте анимацию, чтобы решить этот вопрос - самый полезный способ!

слава @wkille за его ответ: fooobar.com/info/697092/...

Вы можете установить анимацию так:

@keyframes clearAutofill {
  to { background: 'Your-code'; }
  /* e.g background: url('./img/example.png') 0 0 no-repeat #fff; */
}

input:-webkit-autofill {
  animation: clearAutofill forwards;
  /* 'animation-fill-mode: forwards' can keep the style you set. */
}