Удаление входного цвета фона для автозаполнения Chrome?

Question

В форме, над которой я работаю, Chrome автоматически заполняет поля электронной почты и пароля. Это нормально, однако Chrome меняет цвет фона на бледно-желтый.

В дизайне, над которым я работаю, используется светлый текст на темном фоне, так что это действительно портит внешний вид формы - у меня резкие желтые прямоугольники и почти невидимый белый текст. Как только поле сфокусировано, поля возвращаются в нормальное состояние.

Можно ли остановить Chrome, изменяя цвет этих полей?

Answer 1

У меня была проблема, когда я не мог использовать box-shadow, потому что мне нужно, чтобы поле ввода было прозрачным.Это что-то вроде хака, но чистый CSS.Установите переход на очень длительное время.

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
transition: background-color 50000s ease-in-out 0s, color 5000s ease-in-out 0s;
}

Answer 2

Если вы хотите сохранить функциональность автозаполнения без изменений, вы можете использовать немного jQuery для удаления стилей Chrome. Я написал короткий пост об этом здесь: http://www.benjaminmiles.com/2010/11/22/fixing-google-chromes-yellow-autocomplete-styles-with-jquery/

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 3

В дополнение к этому:

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

Вы также можете добавить

input:-webkit-autofill:focus{
-webkit-box-shadow: 0 0 0px 1000px white inset, 0 0 8px rgba(82, 168, 236, 0.6);
}

В противном случае, когда вы нажмете на вход, желтый цвет вернется. Для фокуса, если вы используете загрузчик, вторая часть предназначена для выделения границы 0 0 8px rgba (82, 168, 236, 0.6);

Такой, что он будет выглядеть как любой ввод начальной загрузки.

Answer 4

Попробуйте это: То же, что @ Натан-белый ответ выше с небольшими изменениями.

/* For removing autocomplete highlight color in chrome (note: use this at bottom of your css file). */

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    transition: all 5000s ease-in-out 0s;
    transition-property: background-color, color;
}

Answer 5

Я разработал другое решение с использованием JavaScript без JQuery. Если вы сочтете это полезным или решите повторно опубликовать мое решение, я прошу вас указать только мое имя. Наслаждаться. - Даниэль Фэйрвезер

var documentForms = document.forms;

for(i = 0; i < documentForms.length; i++){
    for(j = 0; j < documentForms[i].elements.length; j++){
        var input = documentForms[i].elements[j];

        if(input.type == "text" || input.type == "password" || input.type == null){
            var text = input.value;
            input.focus();
            var event = document.createEvent('TextEvent');
            event.initTextEvent('textInput', true, true, window, 'a');
            input.dispatchEvent(event);
            input.value = text;
            input.blur();
        }
    }
}

Этот код основан на том факте, что Google Chrome удаляет стиль Webkit, как только вводится дополнительный текст. Простого изменения значения поля ввода недостаточно, Chrome хочет событие. Сосредоточившись на каждом поле ввода (текст, пароль), мы можем отправить событие клавиатуры (буква «а»), а затем установить текстовое значение в его предыдущее состояние (автоматически заполненный текст). Помните, что этот код будет запускаться в каждом браузере и проверять каждое поле ввода на веб-странице, настраивая его в соответствии с вашими потребностями.

Answer 6

Добавление задержки на один час приостановит любые изменения CSS на элементе input
Это лучше, чем добавлять анимацию перехода или внутреннюю тень.

input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill{
  transition-delay: 3600s;
}

Answer 7

У меня есть чистое решение CSS, которое использует фильтры CSS.

filter: grayscale(100%) brightness(110%);

Фильтр оттенков серого заменяет желтый на серый, затем яркость убирает серый.

СМОТРЕТЬ КОДЕПЕН

Answer 8

Для тех, кто использует компас:

@each $prefix in -webkit, -moz {
    @include with-prefix($prefix) {
        @each $element in input, textarea, select {
            #{$element}:#{$prefix}-autofill {
                @include single-box-shadow(0, 0, 0, 1000px, $white, inset);
            }
        }
    }
}

Answer 9

Я сдаюсь!

Поскольку невозможно изменить цвет ввода с помощью автозаполнения, я решил отключить все из них с помощью jQuery для браузеров webkit. Как это:

if (/webkit/.test(navigator.userAgent.toLowerCase())) {
    $('[autocomplete="on"]').each(function() {
        $(this).attr('autocomplete', 'off');
    });
}

Answer 10

У меня есть решение, если вы хотите запретить автозаполнение от Google Chrome, но это немного «мачете», просто удалите класс, который Google Chrome добавляет в эти поля ввода, и установите значение «», если вы нужно показать данные магазина после загрузки.

$(document).ready(function () {
    setTimeout(function () {
            var data = $("input:-webkit-autofill");
            data.each(function (i,obj) {
            $(obj).removeClass("input:-webkit-autofill");
                    obj.value = "";
            });
    },1);           
});