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

Question

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

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

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

Answer 1

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

Здесь вы можете использовать любой цвет, например white, #DDD, rgba(102, 163, 177, 0.45).

Но transparent здесь не работает.

/* Change the white to any color ;) */ 
input:-webkit-autofill { 
    -webkit-box-shadow: 0 0 0 30px white inset; 
} 

Кроме того, вы можете использовать это, чтобы изменить цвет текста:

/*Change text in autofill textbox*/ 
input:-webkit-autofill { 
    -webkit-text-fill-color: yellow !important; 
} 

Совет: Не используйте излишнее радиус размытия в сотни или тысячи. Это не приносит пользы и может привести к нагрузке процессора на более слабые мобильные устройства. (Также верно для реальных, внешних теней). Для нормального поля ввода высотой 20 пикселей высоту 30px «размытие» идеально покроет его.

Answer 2

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

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

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

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

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

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

Это поведение пользователя WebKit.

Answer 3

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

Answer 4

Спасибо Вениамина!

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

Я разработал другое решение с помощью JavaScript без JQuery , Если вы сочтете это полезным или решите повторно отправить мое решение, я просто прошу включить мое имя. Наслаждаться. - Даниэль Fairweather

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

Answer 6

Это может быть немного поздно, но и для будущего референта есть CSS единственным решения, как Олли Hodgons показывает здесь http://lostmonocle.com/post/1479126030/fixing-the-chrome-autocomplete-background-colour

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

input:-webkit-autofill { 
    background-color: #FAFFBD !important; 
} 

Somthing как

#login input:-webkit-autofill { 
    background-color: #ff00ff; 
} 

или

form input:-webkit-autofill { 
    background-color: #f0f; 
} 

который, кажется, работает отлично со мной.

Answer 7

Этот парень имеет great solution с использованием JS и отлично работает.

Answer 8

Возможный способ обхода на данный момент является создание «сильной» в тени:

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

Answer 9

ha извините неправильное место, но для HTML 5 поиска баров Pure Css решение, я не знаю, если его очень хорошие стандарты практики, но вы можете изменить внешний вид веб-кита на кнопку, а затем просто нарисуйте ее, как вы хотеть.

input[type=search]{ 
-webkit-appearance:button; 
} 

Answer 10

Как уже упоминалось ранее, вставка -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 11

Я сдаюсь!

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

if (/webkit/.test(navigator.userAgent.toLowerCase())) { 
    $('[autocomplete="on"]').each(function() { 
     $(this).attr('autocomplete', 'off'); 
    }); 
} 

Answer 12

Решение Daniel Фейрвезер (Removing input background colour for Chrome autocomplete?) (Я хотел бы upvote свое решение, но все-таки нужно 15 респ) работает очень хорошо. Существует огромная разница с большинством сторонних решений: вы можете сохранить фоновые изображения!Но небольшая модификация (только проверка Chrome)

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

Таким образом, вы, если вы используете $ .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 13

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

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

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

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

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

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

И Chrome не знает, что ударил его. .. автозаполнение сломан!

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

Chrome 34.0.1847.116, OSX 10.7.5

Answer 14

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

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

он работает на последнюю версию хрома 34.0.1847.137

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

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

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

Answer 15

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

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

Такое, что оно будет выглядеть как любой вход в бутстрап.

Answer 16

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

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

Answer 17

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

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

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

Answer 18

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

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

Answer 19

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

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

Answer 20

Попробуйте это: же, как @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; 
} 

Answer 21

SASS

input:-webkit-autofill 

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

Answer 22

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

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

Answer 23

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

Answer 24

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

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

@-webkit-keyframes autofill { 
    to { 
     color: #666; 
     background: transparent; 
    } 
} 

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

Answer 25

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

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

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

Answer 27

У меня есть решение, если вы хотите, чтобы предотвратить автозаполнение от 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);   
}); 

Answer 28

Простой, просто добавьте,

autocomplete="new-password" 

в поле пароля.

Answer 29

После 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; 
    } 

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

Answer 30

использовать это и проверить вашу проблему проблема решена

<input type="email" id="email" name="email" class="form-control validate" onfocus="this.removeAttribute('readonly');" readonly> 

Answer 31

Google Chrome агент пользователя предотвратить разработчики CSS, поэтому для изменения autofill UI должен используйте другое имущество, подобное этим:

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

Answer 32

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

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

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

SEE CODEPEN

Answer 33

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

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

Answer 34

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

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