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


653

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

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

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


2
Здесь у вас есть более
полная

Смотрите мой ответ на аналогичный пост: stackoverflow.com/a/13691346/336235
Эрнест Карлсонс

Ответы:


1170

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

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

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

/* Change the white to any color ;) */
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active  {
    -webkit-box-shadow: 0 0 0 30px white inset !important;
}

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

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

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


1
В Chrome теперь таблица стилей пользовательского агента показывает :-internal-autofill-previewedи :-internal-autofill-selectedпсевдоклассы вместо -webkit-autofill... Таинственно, однако, -webkit-autofillвсе еще работает. Мне лично это не нужно !important.
Энди

Мне не нужны были псевдоселекторы hover / focus / active
antoine129

318

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

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

@-webkit-keyframes autofill {
    0%,100% {
        color: #666;
        background: transparent;
    }
}

input:-webkit-autofill {
    -webkit-animation-delay: 1s; /* Safari support - any positive time runs instantly */
    -webkit-animation-name: autofill;
    -webkit-animation-fill-mode: both;
}

Пример Codepen: https://codepen.io/-Steve-/pen/dwgxPB


Работает как шарм.
Lalnuntluanga Chhakchhuak

1
Это определенно работает! (Chrome 79)
Lashae

3
Я считаю, что это лучше, чем принятый ответ ... метод box-shadow является умным и работает, но когда пользователь выбирает значение для автозаполнения, в поле ввода будет кратковременно мигать цвет по умолчанию, что может быть неприятно если ваши входы имеют темный фон. Это решение не имеет таких проблем. Ура!
Skwidbreth

Отлично! Работал еще лучше, чем я надеялся!
sdlins

2
Это работает для Vuetify 2, особенно если вы установитеcolor: inherit
Марк

276

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

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

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

7
Круто, мне тоже нужен прозрачный фон. PS: не забудьте -webkit-text-fill-color: yellow !important;цвет текста.
gfpacheco

Это все равно покажет фон автозаполнения, когда ввод был скрыт / показан с display. Скрипка - Проверьте это
Мартин

27
Вместо того, чтобы устанавливать transition-durationсмехотворно высоко, было бы лучше установить transition-delayвместо этого. Таким образом вы еще больше уменьшаете возможность любых изменений цвета.
Лохматый

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

1
Отличное решение .... но почему это работает? И почему настройка background-colorне работает? Хром должен это исправить !!
TetraDev

60

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

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

6
Я установил изображение в качестве фона поля ввода, это решение удаляет желтый оттенок, но фоновое изображение все еще скрыто
Matteo Tassinari

Лучшее решение на сегодняшний день, прекрасно работает с существующими box-shadowдля проверки
Йоанн

Хром сказал "color 9999s ease-out, background-color 9999s ease-out";это не валидное выражение. Тогда я использовал код, -webkit-transition: background-color 9999s ease-out;и-webkit-text-fill-color: #fff !important;
naanace

1
работал, но без двойной кавычки для меня;)
Джон

@ Йоанн, как именно это сработало с твоей существующей box-shadowпроверкой? В моем случае из-за этого правила css моя пользовательская тень от красного поля (которая указывает на ошибку ввода) задерживается, заставляя пользователя поверить, что самый последний ввод неверен, хотя на самом деле это хорошо.
Пол Разван Берг

50

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

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

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

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

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

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

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


22
спасибо, но это правило CSS webkit не работает. Таблица стилей агента пользователя всегда перекрывает цвет фона, даже если для него (a) установлено значение !importantи (b) задано значение идентификатора для большей специфичности. Похоже, что Chrome всегда собирается переопределить его. Удаление автозаполнения, кажется, работает, но на самом деле это не то, что я хочу сделать.
Рассерженная шкура

1
У некоторых людей такая же проблема, вы проверяли сообщение об ошибке? code.google.com/p/chromium/issues/detail?id=1334
Мохамед Мансур

6
Chrome блокирует любые попытки CSS переопределить этот желтый цвет. Установка autocomplete="off", безусловно, поднимет вопросы доступности. Почему этот ответ помечен как правильный?
Жоао

2
Это хорошее решение, но если вы используете React, он будет жаловаться, что автозаполнение является неизвестным свойством DOM. Следовательно, это на самом деле автозаполнение (обратите внимание, верблюд).
Тим Сколлик

2
Отключение автозаполнения - это взлом, а не решение
Paullo

30

Возможный обходной путь на данный момент - установить «сильную» внутреннюю тень:

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

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

22

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

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

для любопытных фоновый цвет не имеет никакого эффекта. -Webkit-box-shadow - это умный бит, который перекрывает желтый фон в Chrome
Geuis

19

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

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

Я установил изображение в качестве фона поля ввода, это решение удаляет желтый оттенок, но фоновое изображение все еще скрыто
Matteo Tassinari

Это единственный, кто работает на меня в Chrome 83. Самый проголосовавший работал до Chrome 82.
sdlins

19

SASS

input:-webkit-autofill

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

1
Это действительно работает для меня, так как принятый ответ мигает бледно-желтым.
CleoR

лучшее решение imho
Ян Пэпке

15

После 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;
  }

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


11

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

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

10

В добавок к этому:

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

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


10

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

На данный момент в последнем Chrome 50.xx, он работает отлично. Большое спасибо!
vivekkupadhyay

2
Вместо того, чтобы устанавливать transition-durationсмехотворно высоко, было бы лучше установить transition-delayвместо этого. Таким образом вы еще больше уменьшаете возможность любых изменений цвета.
Лохматый

@ Shaggy спасибо, я просто переключился на задержку. Гораздо приятнее.
Алекс

9

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

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

Это лучший ответ после попытки всех ответов.
gfcodix

8

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

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

Это не очень хорошее решение, так как автоматическое заполнение пароля в Google Chrome перестает работать. То есть изначально вы вводите имя, а Google Chrome автоматически заполняет пароль. Однако, как только вышеописанный javascript выполняется, имя удаляется и устанавливается снова, а автоматически заполненный пароль теряется
vanval

6

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


хорошо, это работало по большей части .. это очищает мой пароль к сожалению. Попытка заставить его сначала сохранить пароль и сбросить его после циклов for, но в chrome, похоже, есть некоторые проблемы с этим. мммм
Дастин Шелк

6

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

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

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

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


Это не работает для меня?
Ikechukwu Eze

5

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

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

Хороший, и спасибо за код SASS!
Бернулли ИТ

4

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

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

3

Я сдаюсь!

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

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

3

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

3

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

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

Таким образом, если вы используете $ .show () для своей формы, вам нужно запустить этот код после события show ()

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

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

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

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


3

и это сработало для меня (Chrome 76 протестирован)

input:-internal-autofill-selected {
    background-color: transparent;
}

3

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

/* Change Autocomplete styles in Chrome*/
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  border: 1px solid green;
  -webkit-text-fill-color: green;
  -webkit-box-shadow: 0 0 0px 1000px #000 inset;
  transition: background-color 5000s ease-in-out 0s;
}

Это не работает (больше) и было скопировано с CSS Tricks BTW
Bernoulli IT

1
Это сработало для меня.
AzizStark

2

Спасибо, Бенджамин!

Решение 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
}

2

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

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

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

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

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

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

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

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

Chrome 34.0.1847.116, OSX 10.7.5


2

К сожалению, строго ни одно из вышеперечисленных решений не помогло мне в 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)">

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


У меня решение Chrome 51.0.2704.106 / OSX 10.11.5 отлично работает.
oens

2

Я использую это. работать на меня. удалить желтый фон поля.

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
input:-webkit-autofill:valid,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus
{
    -webkit-transition-delay: 99999s;
    -webkit-text-fill-color:#D7D8CE;
}

1

Как упоминалось ранее, для меня лучше всего подходит 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;
}

1

Это сработало для меня:

padding: 5px;
background-clip: content-box;
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.