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

Question

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

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

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

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

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

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

Answer 2

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

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

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

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

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

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

И Chrome не знает, что попало в него ... автозаполнение не работает!

Безумный хак, я знаю. Но это работает для меня.

Chrome 34.0.1847.116, OSX 10.7.5

Answer 3

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

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

Answer 4

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

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

Answer 5

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

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

Answer 6

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

Answer 7

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

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

Answer 8

Мы можем использовать псевдоселектор -webkit-autofill, чтобы настроить таргетинг на эти поля и стилизовать их по своему усмотрению. Стиль по умолчанию влияет только на цвет фона, но здесь применяются большинство других свойств, таких как рамка и размер шрифта. Мы даже можем изменить цвет текста, используя -webkit-text-fill-color, который включен во фрагмент ниже.

/ * Изменение стилей автозаполнения в 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;
}

Answer 9

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

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

Answer 10

воскресение нити через два года. Я работаю над этой проблемой около дня и нашел простой трюк для предотвращения этой уродливой функции автозаполнения:

просто добавьте случайную строку, чтобы сформировать цель как <form action="site.com/login.php?random=123213">

работает в последней версии Chrome 34.0.1847.137

обновление: , если оно не работает, задайте странный протокол для действия, например <form id="test" action="xxx://">, и заполните эту область позже javascript:

$('#test').attr('action', 'http://example.site/login.php');

обновление 2 : по-прежнему возникают проблемы с этим, я решил полностью удалить тег <form> и опубликовать переменные с помощью jquery. это проще.