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

Это сложное решение для этой задачи.

(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"/>

SASS

input:-webkit-autofill

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

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

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-keyframes autofill {
    to {
        color: #666;
        background: transparent;
    }
}

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

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

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

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

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

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

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

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

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

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

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

Хотя решения, которые могут быть найдены во многих ответах, действительно работают в Chrome, они не работают в Safari для Mac и iOS.

Safari требует двух дополнительных операторов: background-clip и border-radius.

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

/* Disable autofill highlighting */
input:-webkit-autofill  {
  -webkit-text-fill-color: var(--text-input-color) !important;
  -webkit-box-shadow: 0 0 0 1rem var(--page-background-color) inset !important;
  background-clip: content-box !important;
  border-radius: 0 !important;
}

(Изменитесь --text-input-color и --page-background-color с Вашими собственными значениями.)