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

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

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

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

+558
06 мая '10 в 13:36
источник поделиться
38 ответов
  • 1
  • 2

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

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

+1036
07 янв. '13 в 23:35
источник

Связанные вопросы


Похожие вопросы

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

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

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

+256
25 мая '16 в 8:57
источник

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

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

-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;
}
+251
30 мар. '15 в 15:44
источник

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

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;
}
+54
10 сент. '15 в 15:07
источник

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

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

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

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

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

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

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

+47
06 мая '10 в 22:26
источник

Возможным обходным путем на данный момент является установка "сильной" внутренней тени:

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;
}  
+26
13 дек. '12 в 12:27
источник

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

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;
    }
+22
11 дек. '15 в 2:32
источник

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

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;
}
+18
12 июн. '15 в 6:39
источник

SASS

input:-webkit-autofill

  &,
  &:hover,
  &:focus,
  &:active
    transition-delay: 9999s
    transition-property: background-color, color
+15
23 окт. '15 в 21:43
источник

Через 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;
  }

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

+14
03 нояб. '16 в 9:27
источник

Если вы хотите сохранить функциональность автозаполнения, вы можете использовать немного 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);
    });
});}
+8
23 нояб. '10 в 21:44
источник

В дополнение к этому:

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

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

+8
18 июн. '14 в 5:35
источник

У меня была проблема, когда я не мог использовать 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;
}
+8
21 мар. '16 в 20:18
источник

Попробуйте следующее: То же, что @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;
}
+7
24 сент. '15 в 6:59
источник

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

input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill{
  transition-delay: 3600s;
}
+6
25 июн. '18 в 6:24
источник

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

+6
18 февр. '12 в 4:29
источник

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

@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);
            }
        }
    }
}
+4
14 мар. '15 в 0:31
источник

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

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

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

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

+4
18 дек. '17 в 15:58
источник

У меня есть решение, если вы хотите предотвратить автозаполнение от google chrome, но его немного "мачете", просто удалите класс, который Chrome 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
14 окт. '16 в 17:15
источник

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

И вам нужно иметь в виду, он ТОЛЬКО работает над видимыми полями!

Итак, если вы используете $.show() для своей формы, вам нужно запустить этот код. После 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();
    }

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

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

+3
03 янв. '14 в 3:55
источник

Я сдаюсь!

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

if (/webkit/.test(navigator.userAgent.toLowerCase())) {
    $('[autocomplete="on"]').each(function() {
        $(this).attr('autocomplete', 'off');
    });
}
+3
24 окт. '13 в 12:41
источник

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

Итак, я спросил себя: "Как Chrome определяет, что должно быть автозаполнено на данной странице?"

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

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

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

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

И Chrome не знает, что попало... autocomplete сломан!

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

Chrome 34.0.1847.116, OSX 10.7.5

+2
25 апр. '14 в 23:01
источник

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

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;
    }
}
+2
08 февр. '18 в 17:54
источник

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

Решение 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
26 мая '11 в 11:01
источник

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

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

+2
23 июн. '16 в 0:27
источник

Как упоминалось ранее, вставка -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
23 мая '13 в 15:04
источник

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

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

@-webkit-keyframes autofill {
  to {
    color: #000;
    background: transparent;
  }
}
+1
20 июн. '14 в 1:10
источник

У этого парня есть отличное решение с использованием JS и отлично работает.

+1
22 нояб. '12 в 17:05
источник

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

padding: 5px;
background-clip: content-box;
+1
30 дек. '17 в 20:52
источник

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

(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"/>
0
05 окт. '16 в 7:54
источник
  • 1
  • 2

Посмотрите другие вопросы по меткам или Задайте вопрос