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


245

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

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

альтернативный текст альтернативный текст

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


4
Я также хотел бы видеть, есть ли ответ на это.
Кайл

12
Что касается стилей, этот цвет может быть серьезно связан с элементами дизайна, например, с выделением тегов ввода в Chrome, я бы больше хотел изменить цвет, чем отключить его.
Кайл

3
Google, кажется, признает эту проблему в некоторой степени. См. Code.google.com/p/chromium/issues/detail?id=46543
MitMaro,

1
Чтобы отключить автозаполнение, вы можете добавить autocomplete = "off" к вашему элементу ввода, например, <input type = "text" id = "input" autocomplete = "off">
joe_young

1
Просто дополнительная информация: я был укушен этим, когда у меня есть поле пароля. Мои поля подсвечены автоматически (желтым цветом) и заполнены странным значением. И я нашел решение здесь: zigpress.com/2014/11/22/stop-chrome-messing-forms ... Решение находится в разделе «Отключить автозаполнение Google Chrome» ... добавить скрытые поля.
Кокорда Рака

Ответы:


282

Измените «белый» на любой цвет, который вы хотите.

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

4
отличная идея. Я бы выбрал 50 или 100 всякий раз, когда достаточно (поля ввода обычного размера), чтобы избежать потенциальных падений производительности на более слабых устройствах. (И нет необходимости в пикселях после 0)
Фрэнк Нок

4
Люблю этот хак! Отличное мышление ... Все удаляют автозаполнение. Я хотел сохранить автозаполнение только для того, чтобы покататься на уродливом желтом.
Трэвис

1
Не работает, если у вас есть фоновые изображения за полем ввода, просто заполните всю область белым. Я попробовал все решения на этой странице, в том числе основанные на jquery, и они не сработали для меня, в конце концов мне пришлось добавить autocomplete = "off" в поле.
Myke Black

19
Чтобы также стилизовать цвет текста используйте -webkit-text-fill-color- смотрите этот вопрос
Эрвин Вессельс

2
есть ошибка, я не могу изменить синтаксис, но теперь это работает:box-shadow: inset 0 0 0 1000px white !important;
Мухаммед Умер

49

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

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

Лучшее решение для меня, поскольку значения цвета RGBA не работали в -webkit-box-shadow. Также устраняется необходимость указывать значения цвета для этого объявления: значения по умолчанию все равно будут применяться.
Себастьян

еще лучше использовать задержку перехода вместо ее продолжительности, чтобы вообще не смешивать цвета
antoine129

хорошо, но по какой-то причине мне пришлось перенести это правило в конец файла, иначе не сработало
Игорь Мизак

Вот что я искал! Спасибо!
Ахмедзянов Данилиан

43

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

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

Это сработало, тогда как топовый ответ - нет. Однако я думаю, что я не буду пытаться изменить поведение, так как а). это javascript, поэтому между ним работает секунда, и он не работает (пока не загрузится js) и b). это может запутать пользователя chrome, который привык к поведению по умолчанию.
TK123

3
Мой хром только повторно применяет желтый цвет к новому входу :(
Дастин Шелк

Пожалуйста, не надо. Это не будет работать с любой платформой JS, только для статических сайтов.
Ахмедзянов Данилиан

26

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

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

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


7
Поворот autocomplete="off"не доступен в эти дни.
Жоао

4
К сожалению, это решение больше не работает в Chrome.
Генрирайт

1
Это крайне не рекомендуется, так как вы на самом деле не решаете актуальную проблему здесь. вместо этого вы создаете новый, расстраивая пользователей, потому что им приходится вручную вводить свои (предположительно) данные для входа (если они даже помнят, кем они были)
xorinzor

25

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

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.)


6
Это было единственное решение, которое я нашел работающим, БЕЗ отключения автозаполнения.
Ксероксоид

может быть установка интервалов не нужна, так как автозаполнение chrome на window.load?
Тимо Хуовинен

2
Работает без удаления автозаполнения, гораздо лучшее решение, чем те, которые имеют миллионы голосов.
Союзник

Другие решения не сработали для меня, даже самые решительные, но это сработало. Проблема, которая противоположна тому, что @Timo сказал выше, заключается в том, что Chrome не выполняет автозаполнение прямо в window.load. Несмотря на то, что это сработало, одна проблема заключается в том, что если нет элементов -webkit-autofill, цикл непрерывно выполняется. Вам даже не нужен интервал, чтобы это работало. Просто установите время ожидания с задержкой в ​​50 миллисекунд, и оно будет работать нормально.
Гэвин

16

Следующий 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


Плохо играет, если на поле нанесено несколько теней.
Расширение моей компетенции

6

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

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

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


3

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

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

3

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

<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>

Это единственный пример, который работал для меня как с текстом, так и с фоном в Chrome версии 53.0.2785.116 м
плесы,

2

Вот MooTools версия Джейсона. Исправляет это и в Safari.

window.addEvent('domready',function() { 
    $('username').focus();

    if ((navigator.userAgent.toLowerCase().indexOf(\"chrome\") >= 0)||(navigator.userAgent.toLowerCase().indexOf(\"safari\") >= 0))
    {

        var _interval = window.setInterval(function ()
        {
            var autofills = $$('input:-webkit-autofill');
            if (autofills.length > 0)
            {

                window.clearInterval(_interval); // stop polling
                autofills.each(function(el)
                {
                    var clone = el.clone(true,true).inject(el,'after');;
                    el.dispose();
                });
            }
        }, 20);                                               


    }
});

1
Не используйте этот скрипт. Если нет автозаполненных элементов, цикл будет непрерывно работать в течение 20 миллисекунд. Интервал не нужен. Установите тайм-аут после window.load примерно на 50 миллисекунд, и у вас будет достаточно времени для удаления стиля.
Гэвин

2

Это устраняет проблему как в 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);
}

Это то, что работает для меня. Но БАГ все еще существует, и, как видно, дата не установлена. code.google.com/p/chromium/issues/detail?id=46543#c22
Эдуардо М,

Вы никогда не очищаете свой интервал. Это небрежный код, не используйте его.
Гэвин

1
На самом деле это не работает. Я не могу ничего вводить во входные данные, так как они постоянно клонируются. почти там ...
Дастин Шелк

попробуйте это var id = window.setInterval (function () {$ ('input: -webkit-autofill'). each (function () {var clone = $ (this) .clone (true, true); $ (this) .after (клон) .remove ();});}, 20); $ ( 'вход: -webkit-автозаполнения'). фокус (функция () {window.clearInterval (идентификатор);});
Дастин Шелк

2

Это помогло мне, версия только для CSS.

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

где белый может быть любого цвета, который вы хотите.


2

Я использую это,

input:-webkit-autofill { -webkit-box-shadow: 0 0 0px 1000px white inset !important; }
input:focus:-webkit-autofill { -webkit-box-shadow: 0 0 0px 1000px white inset !important; }
/* You can use color:#color to change the color */

1

В своем теге просто вставьте эту небольшую строку кода.

autocomplete="off"

Однако не помещайте это в поле username / email / idname, потому что, если вы все еще хотите использовать автозаполнение, оно отключит его для этого поля. Но я нашел способ обойти это, просто поместив код в тэг ввода пароля, потому что вы никогда не будете автоматически заполнять пароли. Это исправление должно убрать силу цвета, возможность автозаполнения matinain в вашем поле электронной почты / имени пользователя и позволяет избежать громоздких хаков, таких как Jquery или javascript.


1

Если вы хотите полностью избавиться от него, я изменил код в предыдущих ответах, чтобы он работал на hover, active и focus:

input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:active, input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px white inset;
}

1
добавить !importantнеобходимо, но спасибо, это мне очень помогло.
Polochon

0

Вот решение Mootools, которое делает то же самое, что и решение Алессандро, - заменяет каждый задействованный ввод новым.

if (Browser.chrome) {
    $$('input:-webkit-autofill').each(function(item) {
        var text = item.value;
        var name = item.get('name');
        var newEl = new Element('input');
        newEl.set('name', name);
        newEl.value = text;
        newEl.replaces(item);
    });
}

0

Как насчет этого решения:

if ($.browser.webkit) {
    $(function() {
        var inputs = $('input:not(.auto-complete-on)');

        inputs.attr('autocomplete', 'off');

        setTimeout(function() {
            inputs.attr('autocomplete', 'on');
        }, 100);
    });
}

Он отключает автозаполнение и автозаполнение (таким образом, желтый фон исчезает), ждет 100 миллисекунд и затем возвращается к функции автозаполнения без автозаполнения.

Если у вас есть входные данные, которые необходимо заполнить автоматически, присвойте им auto-complete-onкласс css.


0

Ни одно из решений не помогло мне, ввод имени пользователя и пароля все еще заполнялся и отображался на желтом фоне.

Поэтому я спросил себя: «Как Chrome определяет, что нужно заполнить на данной странице?»

"Он ищет входные идентификаторы, входные имена? Идентификаторы форм? Действие форм?"

Благодаря моим экспериментам с вводом имени пользователя и пароля, я обнаружил только два способа, которые привели бы к тому, что Chrome не смог найти поля, которые должны быть заполнены автоматически:

1) Поместите ввод пароля перед вводом текста. 2) Дайте им то же имя и идентификатор ... или нет имени и идентификатора.

После загрузки страницы с помощью javascript вы можете либо изменить порядок входов на странице, либо динамически присвоить им их имя и идентификатор ...

И Chrome не знает, что попало в него ... автозаполнение остается выключенным.

Сумасшедший хак, я знаю. Но это работает для меня.

Chrome 34.0.1847.116, OSX 10.7.5


0

Единственный способ, который работает для меня, был: (требуется jQuery)

$(document).ready(function(e) {
    if ($.browser.webkit) {
        $('#input_id').val(' ').val('');
    }
});

0

Я исправил эту проблему для поля пароля, которое у меня есть вот так:

Установите тип ввода текста вместо пароля

Удалите введенное текстовое значение с помощью jQuery

Преобразуйте тип ввода в пароль с помощью jQuery

<input type="text" class="remove-autofill">

$('.js-remove-autofill').val('');    
$('.js-remove-autofill').attr('type', 'password');

Не работает в Chrome. Как только поле становится type = password, Chrome заполняет его
mowgli

0

Обновление решения Arjans. При попытке изменить значения он не позволит вам. Это прекрасно работает для меня. Когда вы сосредоточитесь на входе, он станет желтым. его достаточно близко.

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

        $('input:-webkit-autofill').focus(function(){window.clearInterval(id);});
    }
});

$('input:-webkit-autofill').focus(function(){window.clearInterval(id);});

0

Попробуйте этот код:

 	$(function(){
   		setTimeout(function(){
   			$('[name=user_password]').attr('type', 'password');
   		}, 1000);
   	});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<input name="user_password" type="password">


0

платный намрути ответ правильный. Но фон все еще становится желтым, когда выбран вход . Добавление !importantисправить проблему. Если вы хотите также textareaи selectс тем же поведением, просто добавьтеtextarea:-webkit-autofill, select:-webkit-autofill

Только вход

input:-webkit-autofill {
    background-color: rgb(250, 255, 189) !important;
}

введите, выберите, текстовое поле

input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {
    background-color: rgb(250, 255, 189) !important;
}

0

Добавление autocomplete="off" не собирается сокращать это.

Измените атрибут типа ввода на type="search".
Google не применяет автозаполнение для входов с типом поиска.

Надеюсь, это сэкономит вам время.


0

Если вы хотите избежать желтого мерцания, пока ваша CSS не будет применена, шлепните переход на этого плохого парня так:

input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px white inset !important;
    transition: background-color 10s ease-in-out 0s;
}

-1

Окончательное решение:

$(document).ready(function(){
    var contadorInterval = 0;
    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();
                    setTimeout(function(){
//                        $("#User").val('');
                        $("#Password").val('');
                    },10);
                });
            }
            contadorInterval++;
            if(contadorInterval > 50) window.clearInterval(_interval); // stop polling
        }, 20);
    }else{
        setTimeout(function(){
//            $("#User").val('');
            $("#Password").val('');
        },100);
    }
});


-5

Просто оказался с таким же вопросом. Это работает для меня:

form :focus {
  outline: none;
}

3
когда вы щелкнете по нему, это будет контур на поле, а не цвет фона автозаполненного ввода
Клэр,
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.