Removendo a cor de fundo da entrada para o preenchimento automático do Chrome?

Em um formulário no qual estou trabalhando, o Chrome preenche automaticamente os campos de e-mail e senha. Tudo bem, no entanto, o Chrome altera a cor do plano de fundo para uma cor amarela pálida.

O design no qual estou trabalhando está usando texto claro em um fundo escuro, então isso realmente atrapalha a aparência do formulário - tenho caixas amarelas fortes e texto branco quase invisível. Uma vez que o campo está focado, os campos retornam ao normal.

É possível parar o Chrome de alterar a cor desses campos?

Isso funciona bem. Você pode alterar os estilos da caixa de entrada e os estilos de texto dentro da caixa de entrada:

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

Mas transparentnão vai funcionar aqui.

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

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 tem benefício e pode colocar a carga do processador em dispositivos móveis mais fracos. (Também verdadeiro para sombras externas reais). Para uma caixa de entrada normal com 20px de altura, o 'raio de desfoque' de 30px cobrirá perfeitamente.

As soluções anteriores de adicionar uma sombra de caixa 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 significa que, em algum momento, ela poderá aparecer novamente.

Minha solução é usar quadros-chave, para que sempre mostre as cores de sua escolha.

@-webkit-keyframes autofill {
    0%,100% {
        color: #666;
        background: transparent;
    }
}

input:-webkit-autofill {
    -webkit-animation-delay: 1s; /* Safari support - any positive time runs instantly */
    -webkit-animation-name: autofill;
    -webkit-animation-fill-mode: both;
}

Exemplo Codepen: https://codepen.io/-Steve-/pen/dwgxPB

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 entrada transparente

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

Então, tentei algumas outras coisas e vim com isso:

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

Esta é a minha solução, usei transição e atraso de transição, portanto, posso ter um plano de fundo transparente nos meus campos de entrada.

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

Isso foi concebido desde que esse comportamento de coloração é do WebKit. Permite ao usuário entender que os dados foram pré-preenchidos. Bug 1334

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

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

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

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 solução possível 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 seus defeitos. O código abaixo é uma 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 a solução. Está certo. funcionará também para focalizar, focalizar etc. tudo o que você precisa fazer é adicionar! importante a 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 entrada

Adicionar um atraso de uma hora pausaria qualquer alteração de css no elemento de entrada.
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;
}

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

Caso contrário, quando você clicar na entrada, a cor amarela voltará. Para o foco, se você estiver usando o bootstrap, a segunda parte será para a borda destacando 0 0 8px rgba (82, 168, 236, 0.6);

De tal forma que parecerá com qualquer entrada de inicialização.

Eu tive um problema em que não podia usar o box-shadow porque precisava que o campo de entrada fosse transparente. É um pouco complicado, mas é um CSS puro. Defina a transição para um período 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;
}

Tente o seguinte: Mesmo que a resposta de Nathan-white 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;
}

Se você quiser manter intacta a funcionalidade de preenchimento automático, use um pouco de jQuery para remover o estilo do Chrome. Eu escrevi um pequeno post 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);
    });
});}

Eu desenvolvi outra solução usando JavaScript sem JQuery. Se você achar isso útil ou decidir publicar novamente minha solução, peço apenas que você inclua meu nome. Aproveitar. - 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 o texto adicional é inserido. Simplesmente alterar o valor do campo de entrada não é suficiente, o Chrome deseja um evento. Ao focar em cada campo de entrada (texto, senha), podemos enviar um evento de teclado (a letra 'a') e, em seguida, definir o valor do texto para o 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 entrada da página da Web, ajustando-o de acordo com suas necessidades.

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

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

O filtro em escala de cinza substitui o amarelo por cinza e o brilho remove o cinza.

VER CODEPEN

Isso funcionará para entrada, área de texto e seleção nos estados normal, pairar, foco e ativo.

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

Para quem está 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);
            }
        }
    }
}

Desisto!

Como não há como alterar a cor da entrada com o preenchimento automático, decido desativar todos eles com os navegadores jQuery for webkit. Como isso:

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

Eu tenho uma solução, se você deseja impedir o preenchimento automático do google chrome, mas é um pouco "facão", basta remover a classe que o google chrome adiciona a esses campos de entrada e defina o valor como "" 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 da entrada para o preenchimento automático do Chrome? ) (Eu adoraria aprovar sua solução, mas ainda preciso de 15 representantes) funciona muito bem. Existe uma diferença realmente grande com a solução mais votada: você pode manter imagens de fundo! Mas uma pequena modificação (apenas verificação do Chrome)

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

Então, se você estiver usando $ .show () no seu formulário, precisará executar este código Após o evento show ()

Minha solução completa (eu tenho um botão de mostrar / ocultar 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, posso colocar um link para o site em que o usei.

e isso funcionou para mim (Chrome 76 testado)

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

Eu tentei quase todas as soluções acima. Nada funciona para mim. Finalmente trabalhou com esta solução. Espero que alguém ajude isso.

/* Change Autocomplete styles in 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;
}

Graças Benjamin!

A solução Mootools é um pouco mais complicada, pois não consigo obter campos usando $('input:-webkit-autofill'). Portanto, o que 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
}

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

Então, perguntei-me: "Como o Chrome determina o que deve ser preenchido automaticamente em uma determinada página?"

"Procura IDs de entrada, nomes de entrada? IDs de formulário? Ação de formulário?"

Através da minha experiência com o nome de usuário e as entradas de senha, só encontrei duas maneiras que levariam o Chrome a não encontrar os campos que deveriam ser preenchidos automaticamente:

1) Coloque a senha inserida antes da entrada de texto. 2) Dê a eles o mesmo nome e identificação ... ou nenhum nome e identificação.

Após o carregamento da página, com o javascript, você pode alterar dinamicamente a ordem das entradas na página ou atribuir dinamicamente o nome e o ID ...

E o Chrome não sabe o que foi atingido ... o preenchimento automático está quebrado!

Hack louco, 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 (alguns anos após a pergunta)

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

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

Basicamente, ele exclui a tag enquanto salva o valor, recria-o e depois devolve o valor.

Eu uso isso. trabalhe para mim. remova o fundo amarelo do campo.

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

Como mencionado anteriormente, inserir -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 codifique o snippet para alterar a cor do texto:

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

Isso funcionou para mim:

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