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

Question

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

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

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

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

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

250

html css forms google-chrome autofill

Источник

user223386 27 май '10 в 10:30

29 ответов

Решение

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

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

53

Источник

user2291704 10 сен '15 в 15:37

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

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

43

Источник

user509772 16 ноя '10 в 16:33

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

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

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

26

Источник

user1798387 27 май '10 в 10:44

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

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

25

Источник

user190198 13 июл '11 в 14:14

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

16

Источник

user553396 15 янв '14 в 16:41

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

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

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

6

Источник

user3804209 21 янв '16 в 09:12

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

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

3

Источник

user1752562 05 фев '16 в 09:38

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

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

3

Источник

user3323133 06 авг '15 в 12:55

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

3

Источник

user1988930 18 янв '13 в 00:24

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

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

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

2

Источник

user2316012 22 май '15 в 23:48

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

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

2

Источник

user807969 28 июн '15 в 10:53

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


    }
});

2

Источник

user1657251 08 окт '12 в 22:29

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

autocomplete="off"

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

1

Источник

user1091718 25 янв '12 в 01:42

Если вы хотите полностью избавиться от этого, я изменил код в предыдущих ответах, чтобы он работал на 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

Источник

user475536 03 фев '15 в 14:01

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

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

1

Источник

user1343507 08 окт '18 в 12:31

Единственное решение, которое сработало в моем случае:

      :-webkit-autofill {
  -webkit-text-fill-color: #000; /* ok for text, no hack */
  transition-property: background-color; /* begin hack for background... */
  transition-delay: 100000s; /* ...end hack for background */
}

Это решение не идеально, пока ждем, чтобы найти лучшее ...

0

Источник

user4960244 02 сен '21 в 10:30

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

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

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

0

Источник

user1509764 28 окт '15 в 16:41

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

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

Источник

user1271313 01 фев '13 в 15:12

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

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

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

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

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

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

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

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

Chrome 34.0.1847.116, OSX 10.7.5

0

Источник

user1673876 25 апр '14 в 22:51

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

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

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

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

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

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

0

Источник

user558777 25 июн '14 в 12:40

Обновление решения 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

Источник

user2050141 30 апр '15 в 09:50

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

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

0

Источник

user3638028 14 май '14 в 18:41

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

Источник

user678834 03 июн '11 в 09:28

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

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

Источник

user2396977 21 июл '15 в 09:11

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

Источник

user1363927 25 сен '15 в 14:45

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

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

-1

Источник

user1824323 11 апр '14 в 15:21

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

Подобный вопрос: ссылка

-2

Источник

user401048 13 май '14 в 13:59

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

form :focus {
  outline: none;
}

-5

Источник

27 май '12 в 17:13

Другие вопросы по тегам html css forms google-chrome autofill

user427622 07 янв '13 в 23:37 2013-01-07 23:37 · Accepted Answer · 2013-01-07 23:37

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

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

286

Источник

user427622 07 янв '13 в 23:37