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

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

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

можно ли остановить Chrome, меняющий цвет этих Филдс?

30 ответов


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

вы можете использовать любой цвет, например white, #DDD, rgba(102, 163, 177, 0.45).

но transparent не будет работать здесь.

/* Change the white to any color ;) */
input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 30px white inset;
}

кроме того, вы можете использовать это, чтобы изменить цвет текста:

/*Change text in autofill textbox*/
input:-webkit-autofill {
    -webkit-text-fill-color: yellow !important;
}

Совет: не используйте чрезмерный радиус размытия в сотнях или тысячах. Это не имеет никакого преимущества и может поставить загрузку процессора на более слабый мобильный устройства. (Также верно для фактических, внешних теней). Для нормальной входной коробки высотой 20px 30px "радиус размытия" идеально ее покроет.


у меня есть лучшее решение.

установка фона на другой цвет, как показано ниже, не решила проблему для меня, потому что мне нужно прозрачное поле ввода

-webkit-box-shadow: 0 0 0px 1000px white inset;

поэтому я попробовал некоторые другие вещи, и я придумал это:

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

предыдущие решения добавления box-shadow хорошо работают для людей, которым нужен сплошной цветной фон. Другое решение добавления перехода работает, но необходимость установить длительность/задержку будет означать, что в какой-то момент он может появиться снова.

мое решение-вместо этого использовать ключевые кадры, таким образом, он всегда будет показывать цвета по вашему выбору.

@-webkit-keyframes autofill {
    to {
        color: #666;
        background: transparent;
    }
}

input:-webkit-autofill {
    -webkit-animation-name: autofill;
    -webkit-animation-fill-mode: both;
}

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

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-transition: "color 9999s ease-out, background-color 9999s ease-out";
    -webkit-transition-delay: 9999s;
}

Это было разработано так, как это поведение окраски было от WebKit. Это позволяет пользователю понять, что данные были предварительно заполнены. ошибка 1334

вы можете отключить автозаполнение, выполнив (или на определенном элементе управления формой:

<form autocomplete="off">
...
</form

или вы можете изменить цвет автозаполнения делать:

input:-webkit-autofill {
    color: #2a2a2a !important;
}

обратите внимание, что для этого снова отслеживается ошибка: http://code.google.com/p/chromium/issues/detail?id=46543

это поведение WebKit.


возможным обходным путем на данный момент является установка "сильной" внутренней тени:

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

попробуйте это для скрытия стиль автозаполнения

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:active,
input:-webkit-autofill:focus {
    background-color: #FFFFFF !important;
    color: #555 !important;
    -webkit-box-shadow: 0 0 0 1000px white inset !important;
    -webkit-text-fill-color: #555555 !important;
    }

все вышеперечисленные ответы работали, но имели свои недостатки. Приведенный ниже код представляет собой объединение двух вышеуказанных ответов, которые работают безупречно без мигания.

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    transition: background-color 5000s ease-in-out 0s;
    -webkit-box-shadow: 0 0 0px 1000px #fff inset;
}

SASS

input:-webkit-autofill

  &,
  &:hover,
  &:focus,
  &:active
    transition-delay: 9999s
    transition-property: background-color, color

после 2 часов поиска кажется, что google по-прежнему переопределяет желтый цвет, но я для исправления для него. Вот именно. он будет работать для наведения, фокусировки и т. д. все, что вам нужно сделать, это добавить !для него это важно.

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

это полностью удалит желтый цвет из полей ввода


Если вы хотите сохранить функциональность автозаполнения нетронутой, вы можете использовать немного 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);
    });
});}

кроме этого:

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 8 Пикс. формата RGBA(82, 168, 236, 0.6);

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


У меня была проблема, когда я не мог использовать 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;
}

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

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 хочет событие. Фокусируясь на каждом поле ввода (текст, пароль), мы можем отправить событие клавиатуры (буква "a"), а затем установите текстовое значение в его предыдущее состояние (автоматически заполненный текст). Имейте в виду, что этот код будет работать в каждом браузере и проверять каждое поле ввода на веб-странице, настраивая его в соответствии с вашими потребностями.


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

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

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

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

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

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

У меня есть решение, если вы хотите предотвратить автозаполнение из 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);           
});

решение Даниэля Фейрвезера (удаление цвета фона ввода для автозаполнения Chrome?) (Я хотел бы поднять его решение, но все равно нужно 15 rep) работает очень хорошо. Существует действительно огромная разница с большинством решений upvoted : вы можете сохранить фоновые изображения ! Но небольшая модификация (просто проверка Chrome)

и вы должны иметь в виду, он работает только на видимых полях !

Итак, если вы используете $.показать() для ваша форма, вам нужно запустить этот код после Show () event

мое полное решение (у меня есть кнопки Показать/Скрыть для формы входа):

 if (!self.isLoginVisible()) {
        var container = $("#loginpage");
        container.stop();
        self.isLoginVisible(true);
        if (navigator.userAgent.toLowerCase().indexOf("chrome") >= 0) {

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

    } else {
        self.hideLogon();
    }

Извините еще раз, я бы предпочел, чтобы это был комментарий.

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


это будет работать для ввода, textarea и выбора в нормальном, наведении, фокусе и активных состояниях.

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

вот версия SCSS вышеуказанного решения для тех, кто работает с SASS/SCSS.

input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill
{
    &, &:hover, &:focus, &:active
    {
        -webkit-box-shadow: 0 0 0px 1000px white inset !important;
    }
}

Спасибо Вениамин!

решение Mootools немного сложнее, так как я не могу получить поля с помощью $('input:-webkit-autofill'), поэтому я использовал следующее:

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

  window.addEvent('load', function() {
    setTimeout(clearWebkitBg, 20);
    var elems = getElems();
    for (var i = 0; i < elems.length; i++) {
      $(elems[i]).addEvent('blur', clearWebkitBg);
    }
  });
}
function clearWebkitBg () {
  var elems = getElems();
  for (var i = 0; i < elems.length; i++) {
    var oldInput = $(elems[i]);
    var newInput = new Element('input', {
      'name': oldInput.get('name'),
      'id': oldInput.get('id'),
      'type': oldInput.get('type'),
      'class': oldInput.get('class'),
      'value': oldInput.get('value')
    });
    var container = oldInput.getParent();
    oldInput.destroy();
    container.adopt(newInput);
  }
}
function getElems() {
  return ['pass', 'login']; // ids
}

Я сдаюсь!

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

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

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

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

" ищет ли он идентификаторы ввода, имена ввода? Форма удостоверения? Форма действия?"

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

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

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

и Chrome не знает, что его ударило ... автозаполнение не работает!

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

Chrome 34.0.1847.116, OSX 10.7.5


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

Итак, вот агрессивное решение, которое я использую:

function remake(e){
    var val = e.value;
    var id = e.id;
    e.outerHTML = e.outerHTML;
    document.getElementById(id).value = val;
    return true;
}

<input id=MustHaveAnId type=text name=email autocomplete=on onblur="remake(this)">

в основном он удаляет тег при сохранении значения и воссоздает его, а затем возвращает значение.


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

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

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

СМ. CODEPEN


Как упоминалось ранее, inset-webkit-box-shadow для меня работает лучше всего.

/* Code witch overwrites input background-color */
input:-webkit-autofill {
     -webkit-box-shadow: 0 0 0px 1000px #fbfbfb inset;
}

также фрагмент кода для изменения цвета текста:

input:-webkit-autofill:first-line {
     color: #797979;
}

У этого парня есть большое разрешение использование JS и отлично работает.


- Это комплексное решение для этой задачи.

(function($){
    if (navigator.userAgent.toLowerCase().indexOf("chrome") >= 0) {
       $('input, select').on('change focus', function (e) {
            setTimeout(function () {
                $.each(
                    document.querySelectorAll('*:-webkit-autofill'),
                    function () {
                        var clone = $(this).clone(true, true);
                        $(this).after(clone).remove();
                        updateActions();
                    })
            }, 300)
        }).change();
    }
    var updateActions = function(){};// method for update input actions
    updateActions(); // start on load and on rebuild
})(jQuery)
*:-webkit-autofill,
*:-webkit-autofill:hover,
*:-webkit-autofill:focus,
*:-webkit-autofill:active {
    /* use animation hack, if you have hard styled input */
    transition: all 5000s ease-in-out 0s;
    transition-property: background-color, color;
    /* if input has one color, and didn't have bg-image use shadow */
    -webkit-box-shadow: 0 0 0 1000px #fff inset;
    /* text color */
    -webkit-text-fill-color: #fff;
    /* font weigth */
    font-weight: 300!important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="name" autocomplete="name"/>
<input type="email" name="email" autocomplete="email"/>

просто, просто добавьте,

    autocomplete="new-password"

в поле "Пароль".


Google Chrome User agent предотвратить разработчиков CSS, поэтому для изменения autofill UI должен использовать другое свойство, подобное этому:

input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px #d500ff inset !important;
    /*use inset box-shadow to cover background-color*/
    -webkit-text-fill-color: #ffa400 !important;
    /*use text fill color to cover font color*/
}