Удалите желтый фон на входе на автозаполнение

Кто-нибудь знает, как удалить этот уродливый хром-фон при автозаполнении? (См. Ниже.)

До сих пор я пытался:

*:focus {
outline: 0;
}
input:-webkit-autofill {
-webkit-box-shadow: none;
-webkit-text-fill-color: #fff !important;
}
button:focus, input:focus, a:focus{
text-decoration: none !important;
outline: none !important;
}

К сожалению, никто из них не работает. Любая помощь, идеи, подсказки, предложения были бы с благодарностью.

Ответ 1

Как ни странно, это предполагаемое поведение от webkit, чтобы сделать вывод, что пользователь был автозаполнен.

[email protected] Мы наследуем это поведение окраски от WebKit, и я считаю это по дизайну. Это позволяет пользователю понять, что данные были предварительно заполнены.

Вы можете использовать:

input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px white inset;
}

Что изменит фон на белый.

Вы также можете отключить автоматическое завершение, добавив:

autocomplete="off"

например

<input type="text" name="some_name" autocomplete="off"></input>

На ваш вклад, но для удобства использования я бы предложил против этого.

Ответ 2

Добавьте это в свой заголовок

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:none !important;
  -webkit-text-fill-color: inherit !important;
  -webkit-box-shadow: 0 0 0px 1000px #FFFFFF inset;
  transition: background-color 5000s ease-in-out 0s;
}

Это, по-видимому, устраняет эффект желтого повторного заполнения на мышином листе

Ответ 3

.form-item-search-block-form input:focus, 
  .form-item-search-block-form input:hover, 
  .form-item-search-block-form input:active 
    outline: 0 none;
    border: 0 none;
    background: #282828;
    background: url("../images/search_btn.png") no-repeat 96% 9px;
    color: rgb(202,202,202);


   .form-item-search-block-form input:-webkit-autofill 
    -webkit-box-shadow: 0 0 0 1000px #282828 inset;
    -moz-box-shadow: 0 0 0 1000px #282828 inset;
    box-shadow: 0 0 0 1000px #282828 inset;
    -webkit-transition: all 0.7s ease 0s;
    -moz-transition: all 0.7s ease 0s;
    -o-transition: all 0.7s ease 0s;
    transition: all 0.7s ease 0s;
    -webkit-text-fill-color: #eee !Important;