Como remover a cor do plano de fundo de input para o preenchimento automático do Google Chrome?

Em um formulário no qual estou trabalhando, o Chrome preenche automaticamente os campos de e-mail e senha. Isso é bom, no entanto, Chrome muda a cor de fundo para uma cor amarela pálida.

O design em que estou trabalhando está usando texto claro em um fundo escuro, então isso realmente atrapalha a aparência da forma – tenho checkboxs amarelas e texto branco quase invisível. Quando o campo está focado, os campos retornam ao normal.

É possível impedir que o Chrome altere a cor desses campos?

Isso funciona bem, você pode alterar estilos de checkbox de input, bem como estilos de texto dentro da checkbox de input:

Aqui você pode usar qualquer cor, por exemplo, white , rgba(102, 163, 177, 0.45) , rgba(102, 163, 177, 0.45) .

Mas transparent não funcionará aqui.

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

Além disso, você pode usar isso para alterar a cor do texto:

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

Conselho: não use um raio de desfoque excessivo nas centenas ou milhares. Isso não traz benefícios e pode colocar a carga do processador em dispositivos móveis mais fracos. (Também é verdade para as sombras reais, externas). Para uma checkbox de input normal de 20px de altura, 30px ‘raio de desfoque’ cobrirá perfeitamente.

Eu tenho uma solução melhor.

Definir o plano de fundo para outra cor como abaixo não resolveu o problema para mim porque eu precisava de um campo de input transparente

 -webkit-box-shadow: 0 0 0px 1000px white inset; 

Então eu tentei algumas outras coisas e eu inventei isso:

 input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active { transition: background-color 5000s ease-in-out 0s; } 

As soluções anteriores de adicionar uma checkbox de sombra funcionam bem para pessoas que precisam de um fundo de cor sólida. A outra solução de adicionar uma transição funciona, mas ter que definir uma duração / atraso significará que em algum momento ela poderá aparecer novamente.

Minha solução é usar keyframes, dessa forma sempre mostrará as colors de sua escolha.

 @-webkit-keyframes autofill { to { color: #666; background: transparent; } } input:-webkit-autofill { -webkit-animation-name: autofill; -webkit-animation-fill-mode: both; } 

Esta é a minha solução, eu usei transição e atraso de transição, portanto, eu posso ter um fundo transparente em meus campos de input.

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

Isto foi concebido como este comportamento de coloração do WebKit. Permite ao usuário entender os dados preenchidos. Bug 1334

Você pode desativar o preenchimento automático fazendo (ou no controle de formulário específico:

 
...

Ou você pode alterar a cor do preenchimento automático fazendo:

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

Observe que há um bug sendo rastreado para que isso funcione novamente: http://code.google.com/p/chromium/issues/detail?id=46543

Este é um comportamento do WebKit.

Uma possível solução para o momento é definir uma sombra interna “forte”:

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

tente isso para ocultar o estilo de preenchimento automático

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

Todas as respostas acima funcionaram, mas tiveram suas falhas. O código abaixo é um amálgama de duas das respostas acima que funciona perfeitamente sem piscar.

 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 

Após 2 horas de pesquisa parece que o Google ainda substitui a cor amarela de alguma forma, mas eu para a correção para ele. Está certo. Ele vai funcionar para passar o foco, foco etc também. tudo que você precisa fazer é adicionar! importante para ele.

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

isso removerá completamente o amarelo dos campos de input

Se você deseja manter a funcionalidade de preenchimento automático intacta, pode usar um pouco de jQuery para remover o estilo do Chrome. Eu escrevi um post curto sobre isso aqui: 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); }); });} 

Além disso:

 input:-webkit-autofill{ -webkit-box-shadow: 0 0 0px 1000px white inset; } 

Você também pode querer adicionar

 input:-webkit-autofill:focus{ -webkit-box-shadow: 0 0 0px 1000px white inset, 0 0 8px rgba(82, 168, 236, 0.6); } 

De outro modo, quando você clicar na input, a cor amarela retornará. Para o foco, se você estiver usando o bootstrap, a segunda parte é para a borda destacando 0 0 8px rgba (82, 168, 236, 0.6);

Tal que apenas se pareça com qualquer input de bootstrap.

Eu tive um problema em que não podia usar box-shadow porque precisava que o campo de input fosse transparente. É um pouco de truque, mas CSS puro. Defina a transição para um período de tempo muito longo.

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

Eu desenvolvi outra solução usando JavaScript sem JQuery. Se você achar isso útil ou decidir postar novamente minha solução, só peço que inclua meu nome. Apreciar. – Daniel 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(); } } } 

Esse código é baseado no fato de que o Google Chrome remove o estilo do Webkit assim que um texto adicional é inserido. Simplesmente alterar o valor do campo de input não é suficiente, o Chrome deseja um evento. Ao focar em cada campo de input (texto, senha), podemos enviar um evento de teclado (a letra 'a') e, em seguida, definir o valor do texto para seu estado anterior (o texto preenchido automaticamente). Lembre-se de que esse código será executado em todos os navegadores e verificará todos os campos de input na página da Web, ajustando-os de acordo com as suas necessidades.

Tente isto: O mesmo que @ resposta Nathan-branco acima com pequenos ajustes.

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

Para aqueles que estão usando o 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); } } } } 

Eu tenho uma solução se você quiser evitar o preenchimento automático do google chrome, mas é um pouco “machete”, basta remover a class que o google chrome adiciona a esses campos de input e definir o valor para “” se você não precisar mostrar armazenar dados após o carregamento.

 $(document).ready(function () { setTimeout(function () { var data = $("input:-webkit-autofill"); data.each(function (i,obj) { $(obj).removeClass("input:-webkit-autofill"); obj.value = ""; }); },1); }); 

A solução de Daniel Fairweather ( Removendo a cor de fundo de input para o preenchimento automático do Chrome? ) (Eu adoraria aumentar sua solução, mas ainda preciso de 15 repetições) funciona muito bem. Há uma diferença muito grande com a maioria das soluções upvoted: você pode manter imagens de fundo! Mas uma pequena modificação (apenas verificação do Chrome)

E você precisa ter em mente, ele só funciona em campos visíveis !

Então, se você está usando $ .show () para o seu formulário, você precisa executar este código após o evento show ()

Minha solução completa (eu tenho um show / hide botões para o formulário de login):

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

Desculpe novamente, eu preferiria que fosse um comentário.

Se você quiser, eu posso colocar um link para o site onde eu usei.

Isso funcionará para input, textarea e selecione em normal, hover, foco e estados ativos.

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

Aqui está a versão SCSS da solução acima para aqueles que estão trabalhando com o SASS / SCSS.

 input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill { &, &:hover, &:focus, &:active { -webkit-box-shadow: 0 0 0px 1000px white inset !important; } } 

Adicionar um atraso de uma hora pausaria todas as alterações do css no elemento de input.
Isso é mais melhor do que adicionar animação de transição ou sombra interna.

 input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill{ transition-delay: 3600s; } 

Obrigado Benjamin!

A solução Mootools é um pouco mais complicada, já que não consigo obter campos usando $('input:-webkit-autofill') , então o que eu usei é o seguinte:

 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 } 

Desisto!

Como não há como alterar a cor da input com autocomplete, decido desativar todos eles com o jQuery para navegadores webkit. Como isso:

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

Nenhuma das soluções funcionou para mim, a sombra embutida não funciona para mim porque as inputs têm um fundo translúcido sobreposto sobre o plano de fundo da página.

Então, perguntei a mim mesmo: “Como o Google Chrome determina o que deve ser preenchido automaticamente em uma determinada página?”

“Procura IDs de input, nomes de input? IDs de formulário? Ação de formulário?”

Através da minha experiência com as inputs de nome de usuário e senha, havia apenas duas maneiras que achei que poderiam fazer com que o Chrome não conseguisse encontrar os campos que deveriam ser preenchidos automaticamente:

1) Coloque a input da senha à frente da input de texto. 2) Dê a eles o mesmo nome e id … ou nenhum nome e id.

Depois que a página é carregada, com o javascript você pode alterar dinamicamente a ordem das inputs na página ou dinamicamente fornecer seu nome e id …

E o Chrome não sabe o que aconteceu … o preenchimento automático está quebrado!

Maluco, eu sei. Mas está funcionando para mim.

Chrome 34.0.1847.116, OSX 10.7.5

Infelizmente estritamente nenhuma das soluções acima funcionou para mim em 2016 (um par de anos após a pergunta)

Então aqui está a solução agressiva que uso:

 function remake(e){ var val = e.value; var id = e.id; e.outerHTML = e.outerHTML; document.getElementById(id).value = val; return true; }  

Basicamente, ele exclui a tag enquanto salva o valor e o recria, em seguida, retorna o valor.

Eu tenho uma solução CSS pura que usa filtros CSS.

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

O filtro de tons de cinza substitui o amarelo por cinza e, em seguida, o brilho remove o cinza.

VEJA CODEPEN

Como mencionado anteriormente, inset -webkit-box-shadow para mim funciona melhor.

 /* Code witch overwrites input background-color */ input:-webkit-autofill { -webkit-box-shadow: 0 0 0px 1000px #fbfbfb inset; } 

Também trecho de código para alterar a cor do texto:

 input:-webkit-autofill:first-line { color: #797979; } 

Simples, basta adicionar

  autocomplete="new-password" 

para o campo de senha.

Esse cara tem uma ótima solução usando JS e funciona perfeitamente.

Esta é uma solução complexa para esta tarefa.

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

use isso e verifique se o problema foi resolvido