Google Chrome форму автозаповнення та його жовтий фон

У мене є проблема дизайну з Google Chrome та функцією автозаповнення форми. Якщо Chrome запам'ятовує вхід / пароль, він змінює колір тла на жовтий.

Ось кілька скріншотів:

Як видалити цей фон або просто відключити цю автозаповнення?

Змініть "білий" на будь-який колір, який ви хочете.

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

Якщо вам потрібні прозорі поля введення, ви можете використовувати перехід та затримку переходу.

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

Рішення тут :

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

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

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

Ви можете протестувати це в Chrome, як це має працювати.

Якщо ви хочете зберегти автозаповнення, а також будь-які дані, вкладені обробники та функціональні можливості, додані до вхідних елементів, спробуйте цей сценарій:

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

Наведений нижче CSS видаляє жовтий колір фону та замінює його кольором тла на ваш вибір. Він не вимикає автоматичне заповнення, і для нього не потрібні жодні jQuery або Jacks.

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

Для мене працювали, потрібна лише зміна css.

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

ви можете помістити будь-який колір замість #ffffff .

Трохи хакі, але прекрасно працює для мене

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

Комбінація відповідей працювала на мене

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

Ось версія 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);                                               


    }
});

Це вирішує проблему як у 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);
}

У цьому мені допомогла версія CSS.

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

де білий може бути будь-якого кольору.

Я використовую це,

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

У свій тег просто вставте цей невеликий рядок коду.

autocomplete="off"

Однак не розміщуйте це в полі ім’я користувача / електронної пошти / імені, оскільки якщо ви все ще хочете використовувати автозаповнення, це відключить його для цього поля. Але я знайшов спосіб цього, просто помістіть код у тег введення пароля, оскільки ви ніколи не заповнюєте автозаповнення паролів. Це виправлення повинно видалити кольорову силу, можливість автозаповнення matinain у полі електронної пошти / імені користувача та дозволяє уникнути громіздких хак, як-от Jquery або javascript.

Якщо ви хочете повністю його позбутися, я відкоригував код у попередніх відповідях, щоб він працював на наведення, активізацію та фокусування також:

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

Ось рішення 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);
    });
}

Як щодо цього рішення:

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.

Жодне з рішень не працювало для мене, введення імені користувача та пароля все ще заповнювались та надавали жовтий фон.

Тож я запитав себе: "Як Chrome визначає, що слід заповнити на певній сторінці?"

"Чи шукає вхідні ідентифікатори, імена вводу? Ідентифікатори форми? Дія форми?"

Через експерименти з ім'ям користувача та паролем, я знайшов лише два способи, які спричинили б Chrome не в змозі знайти поля, які слід заповнити автоматично:

1) Поставте введення пароля перед введенням тексту. 2) Дайте їм те саме ім’я та ідентифікатор ... або не імені та ідентифікатора.

Після завантаження сторінки за допомогою javascript ви можете або змінити порядок входів на сторінці, або динамічно дати їм своє ім'я та ідентифікатор ...

І Chrome не знає, що це вдарило ... автозаповнення залишається вимкненим.

Божевільний хак, я знаю. Але це працює для мене.

Chrome 34.0.1847.116, OSX 10.7.5

Єдиний спосіб, який працює для мене: (потрібен jQuery)

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

Я вирішив цю проблему для поля пароля, у мене є такий:

Встановіть тип введення для тексту замість пароля

Видаліть вхідне текстове значення за допомогою jQuery

Перетворити тип введення у пароль за допомогою jQuery

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

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

Оновлення рішення 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);});

Спробуйте цей код:

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

відповідь дарованої наміруті правильна. Але фон все одно жовтіє, коли вибрано вхід . Додавання !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;
}

Додавання autocomplete="off"не збирається скорочувати.

Змініть атрибут типу введення на type="search".
Google не застосовує автоматичне заповнення до даних із типом пошуку.

Сподіваюсь, це заощадить певний час.

Якщо ви хочете уникнути жовтого мерехтіння, поки не буде застосовано ваш css, натисніть на перехід на такого поганого хлопчика, як:

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

Остаточне рішення:

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

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

Подібне питання: Посилання

Щойно я опинився з тим же запитанням. Це працює для мене:

form :focus {
  outline: none;
}