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

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

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

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

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

Здесь вы можете использовать любой цвет , например 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 будет его полностью охватывать.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Попробуйте это: То же, что @ 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;
}

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

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

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

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

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

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

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

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

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

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

Я сдаюсь!

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

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

У меня есть решение, если вы хотите запретить автозаполнение в 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 повторений) работает действительно хорошо. Существует большая разница с большинством проголосовавших решений: вы можете сохранить фоновые изображения! Но небольшая модификация (только проверка 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();
    }

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

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

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

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

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

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

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

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

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

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

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

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

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

После загрузки страницы с помощью 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)">

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

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

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

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

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

padding: 5px;
background-clip: content-box;