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

Question

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

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

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

Answer 1

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

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

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

Answer 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 */

Answer 3

Вот 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);                                               


    }
});

Answer 4

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

autocomplete="off"

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

Answer 5

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

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

Answer 6

Добавление autocomplete="off" не приведет к сокращению.

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

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

Answer 7

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

Аналогичный вопрос: Ссылка

Answer 8

Вот решение 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);
    });
}

Answer 9

платная намрути ответ правильный. Но фон все еще становится желтым, когда выбран вход . Добавление !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;
}

Answer 10

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

 	$(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">