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

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

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

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

Сасс

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

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

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

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

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

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

 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) Дайте им то же имя и идентификатор ... или вообще без имени и удостоверения личности.

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

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

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

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 пользовательского интерфейса должны использовать другую собственность, как это:

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