Форма автозаполнения Google Chrome и ее желтый фон

Question

У меня проблема с дизайном Google Chrome и функцией автозаполнения формы. Если Chrome запоминает какой-либо логин / пароль, он меняет цвет фона на желтый.

Вот несколько скриншотов:

Как удалить этот фон или просто отключить автозаполнение?

Answer 1

Измените "белый" на любой нужный вам цвет.

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

Answer 2

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

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-transition-delay: 9999s;
    -webkit-transition: color 9999s ease-out, background-color 9999s ease-out;
}

Answer 3

Решение здесь :

if (navigator.userAgent.toLowerCase().indexOf("chrome") >= 0) {
    $(window).load(function(){
        $('input:-webkit-autofill').each(function(){
            var text = $(this).val();
            var name = $(this).attr('name');
            $(this).after(this.outerHTML).remove();
            $('input[name=' + name + ']').val(text);
        });
    });
}

Answer 4

В Firefox вы можете отключить все автозаполнения в форме с помощью атрибута autocomplete = "off / on". Аналогично, для автозаполнения отдельных элементов можно задать один и тот же атрибут.

<form autocomplete="off" method=".." action="..">  
<input type="text" name="textboxname" autocomplete="off">

Вы можете проверить это в Chrome, как оно должно работать.

Answer 5

Если вы хотите сохранить автозаполнение, а также любые данные, прикрепленные обработчики и функциональные возможности, прикрепленные к вашим элементам ввода, попробуйте этот скрипт:

if (navigator.userAgent.toLowerCase().indexOf("chrome") >= 0)
{
    var _interval = window.setInterval(function ()
    {
        var autofills = $('input:-webkit-autofill');
        if (autofills.length > 0)
        {
            window.clearInterval(_interval); // stop polling
            autofills.each(function()
            {
                var clone = $(this).clone(true, true);
                $(this).after(clone).remove();
            });
        }
    }, 20);
}

Опрашивает, пока не находит элементы автозаполнения, клонирует их, включая данные и события, затем вставляет их в DOM в том же месте и удаляет оригинал. Он останавливает опрос, когда находит клонирование, так как автозаполнение иногда занимает секунду после загрузки страницы. Это вариант предыдущего примера кода, но он более устойчив и сохраняет как можно больше функциональных возможностей.

(подтверждена работа в Chrome, Firefox и IE 8.)

Answer 6

Следующий CSS удаляет желтый цвет фона и заменяет его на цвет фона по вашему выбору. Он не отключает автозаполнение и не требует взлома jQuery или Javascript.

input:-webkit-autofill {
    -webkit-box-shadow:0 0 0 50px white inset; /* Change the color to your own background color */
    -webkit-text-fill-color: #333;
}
input:-webkit-autofill:focus {
    -webkit-box-shadow: /*your box-shadow*/,0 0 0 50px white inset;
    -webkit-text-fill-color: #333;
}

Решение скопировано с: Переопределить заполнение форм браузера и подсветку ввода с помощью HTML / CSS

Answer 7

Работает для меня, требуется только изменение css.

input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px #ffffff inset!important;
}

Вы можете поместить любой цвет вместо # ffffff .

Answer 8

Это устраняет проблему как в Safari, так и в Chrome

if(navigator.userAgent.toLowerCase().indexOf("chrome") >= 0 || navigator.userAgent.toLowerCase().indexOf("safari") >= 0){
window.setInterval(function(){
    $('input:-webkit-autofill').each(function(){
        var clone = $(this).clone(true, true);
        $(this).after(clone).remove();
    });
}, 20);
}

Answer 9

Комбинация ответов сработала для меня

<style>
    input:-webkit-autofill,
    input:-webkit-autofill:hover,
    input:-webkit-autofill:focus,
    input:-webkit-autofill:active {
        -webkit-box-shadow: 0 0 0px 1000px #373e4a inset !important;
           -webkit-text-fill-color: white !important;
   }
</style>

Answer 10

Немного хакерский, но у меня отлично работает

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