Видалення фонового кольору вводу для автоматичного заповнення 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;
}

Порада: Не використовуйте надмірний радіус розмиття у сотнях чи тисячах. Це не має ніякої користі і може поставити завантаження процесора на слабші мобільні пристрої. (Також справедливо для фактичних, зовнішніх тіней). Для звичайного вхідного вікна висотою 20 пікселів "радіус розмиття" 30 пікселів ідеально покриє його.

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

Моє рішення - замість цього використовувати ключові кадри, тому вони завжди відображатимуть обрані вами кольори.

@-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/isissue/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:-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);

Такий, що він буде просто схожий на будь-який вхід для завантаження.

У мене виникла проблема, коли я не міг використовувати поле-тінь, тому що мені потрібно було ввести поле для прозорості. Це трохи хак, але чистий 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;
}

Спробуйте це: Те саме, що @ Натан-біла відповідь вище з незначними налаштуваннями.

/* 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 для веб-браузерів. Подобається це:

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;