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

653

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?

DisgruntledGoat
fonte
2
Aqui você tem informações mais amplas: stackoverflow.com/questions/2338102/…
dasm
Veja minha resposta para um post semelhante: stackoverflow.com/a/13691346/336235
Ernests Karlsons

Respostas:

1170

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.

Alnamrouti com tarifa
fonte
1
Agora, no Chrome, a folha de estilo do agente do usuário mostra :-internal-autofill-previewede :-internal-autofill-selectedpseudoclasses em vez de -webkit-autofill... No entanto, misteriosamente, -webkit-autofillainda funciona. Eu pessoalmente não precisava do !important.
Andy
Eu não precisava dos pseudo-seletores hover / focus / active
antoine129
318

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

Steve
fonte
Funciona como charme.
Lalnuntluanga Chhakchhuak 7/11
1
Isso definitivamente funciona! (Chrome 79)
Lashae
3
Acho que isso é melhor do que a resposta aceita ... o método box-shadow é inteligente e funciona, mas quando um usuário seleciona um valor para preenchimento automático, a cor padrão pisca brevemente no campo de entrada, o que pode ser problemático se suas entradas tiverem fundos escuros. Esta solução não possui esses problemas. Felicidades!
Skwidbreth 19/12/19
Perfeito! Funcionou ainda melhor do que eu esperava!
Sdlins 31/12/19
2
Isso funciona para o Vuetify 2, especialmente se você definir.color: inherit
Marc
275

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;
}
Nathan White
fonte
7
Incrível, eu também preciso de um plano de fundo transparente. PS: não esqueça a -webkit-text-fill-color: yellow !important;cor do texto.
Gfpacheco
Isso ainda mostrará o fundo do preenchimento automático quando a entrada for ocultada / mostrada com display. Fiddle - Check it out
Martin
27
Em vez de definir o transition-durationridiculamente alto, seria melhor definir o transition-delaycontrário. Dessa forma, você reduz ainda mais a possibilidade de alterações nas cores.
Shaggy
O transitionhack funcionará apenas se a entrada não for preenchida automaticamente com uma entrada padrão gravada pelo navegador, caso contrário, o fundo amarelo ainda estará lá.
Guari
1
Ótima solução .... mas por que isso funciona? E por que a configuração background-colornão funciona? O Chrome precisa corrigir isso!
TetraDev 01/07/19
60

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;
}
Gísli Freyr Svavarsson
fonte
6
Tenho definir uma imagem como plano de fundo do campo de entrada, esta solução elimina a sombra amarela, mas a imagem de fundo ainda está escondida
Matteo Tassinari
Melhor solução até agora, funciona muito bem com existente box-shadowpara validação
Yoann
cromo disse que "color 9999s ease-out, background-color 9999s ease-out";não é exprssão valide. Eu usei o código então, -webkit-transition: background-color 9999s ease-out;e-webkit-text-fill-color: #fff !important;
naanace
1
trabalhou, mas sem a aspa para mim;)
Jon
@Yoann, como exatamente funcionou com a box-shadowvalidação existente ? No meu caso, devido a essa regra css, minha sombra de caixa vermelha personalizada (que indica um erro de entrada) fica atrasada, fazendo com que o usuário acredite que a entrada mais recente é inválida quando na verdade é boa.
Paul Razvan Berg
50

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.

Mohamed Mansour
fonte
22
obrigado, mas essa regra CSS do webkit não está funcionando. A folha de estilo do agente do usuário está sempre substituindo a cor do plano de fundo, mesmo com (a) definida como !importante (b) direcionada com um ID para maior especificidade. Parece que o Chrome sempre o substituirá. Remover o preenchimento automático parece funcionar, mas realmente não é o que eu quero fazer.
DisgruntledGoat
1
Algumas pessoas têm o mesmo problema, você verificou a publicação do bug? code.google.com/p/chromium/issues/detail?id=1334
Mohamed Mansour
6
O Chrome bloqueia qualquer tentativa de CSS de substituir essa cor amarela. A configuração autocomplete="off"certamente criará problemas de acessibilidade. Por que essa resposta está marcada como correta de qualquer maneira?
João
2
Esta é uma boa solução, mas se você estiver usando o React, ele reclamará que o preenchimento automático é uma propriedade desconhecida do DOM. Portanto, na verdade, é o preenchimento automático (observação em camelcased).
precisa saber é o seguinte
2
Desligar auto completo é um hack não uma solução
Paullo
30

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;
}  
Tamás Pap
fonte
2
Esta é a solução que está realmente trabalhando, não quer pular o fundo amarelo apenas algumas vezes, como a resposta aceita resultaria em.
davidkonrad
22

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;
    }
Francisco Costa
fonte
para os curiosos, a cor de fundo não tem efeito. O -webkit-box-shadow é o pouco inteligente que substitui o fundo amarelo no Chrome
Geuis
19

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;
}
Jack Russell
fonte
Tenho definir uma imagem como plano de fundo do campo de entrada, esta solução elimina a sombra amarela, mas a imagem de fundo ainda está escondida
Matteo Tassinari
Este é o único que trabalha para mim no Chrome 83. O mais votado estava trabalhando até o Chrome 82.
sdlins
19

SASS

input:-webkit-autofill

  &,
  &:hover,
  &:focus,
  &:active
    transition-delay: 9999s
    transition-property: background-color, color
Patrick Fisher
fonte
1
Isso realmente funcionou para mim, pois a resposta aceita pisca em amarelo pálido.
C23R15:
melhor solução imho
Jan Paepke 16/10/19
15

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

não
fonte
11

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;
}
StefansArya
fonte
10

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.

Linghua Jin
fonte
10

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;
}
Alex
fonte
A partir de agora, no Chrome 50.xx mais recente, ele está funcionando perfeitamente. Muito obrigado!
precisa saber é o seguinte
2
Em vez de definir o transition-durationridiculamente alto, seria melhor definir o transition-delaycontrário. Dessa forma, você reduz ainda mais a possibilidade de alterações nas cores.
Shaggy
@ Shaggy obrigado, eu apenas mudei para um atraso. Muito melhor.
1276 Alex
9

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;
}
Surender Lohia
fonte
Esta é a melhor resposta depois de tentar todas as respostas.
gfcodix 27/02/19
8

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);
    });
});}
Benjamin
fonte
Essa parece ser a melhor solução, apesar de bloquear o e- mail do Kicksend . Alguma idéia de como contornar isso?
João
Esta não é uma boa solução, pois o preenchimento automático da senha do google chrome para de funcionar. Inicialmente, você preenche o nome e o Google chrome preenche automaticamente a senha. No entanto uma vez que os executa javascript acima, o nome é excluído e definir novamente, eo encheu de senha auto está perdido
vanval
6

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.

Daniel Fairweather
fonte
bem, funcionou na maior parte .. infelizmente limpa minha senha. Tentando fazê-lo salvar a senha primeiro e redefini-la após os loops for, mas o chrome parece estar tendo alguns problemas com isso. mmmm
Dustin Silk
6

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

2ne
fonte
Isso não funciona para mim?
Ikechukwu Eze 5/04
5

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;
    }
}
Waqas Anwar
fonte
Agradável, e obrigado pelo código SASS!
Bernoulli IT
4

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);
            }
        }
    }
}
jedmao
fonte
3

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');
    });
}
ed1nh0
fonte
3

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);           
});
Nicolas Arias
fonte
3

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.

Jurion
fonte
3

e isso funcionou para mim (Chrome 76 testado)

input:-internal-autofill-selected {
    background-color: transparent;
}
guido _nhcol.com.br_
fonte
3

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;
}
SUHAIL KC
fonte
Isso não funciona (mais) e foi copiado do CSS Tricks BTW
Bernoulli IT
1
Isso funcionou para mim.
AzizStark
2

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
}
e eu
fonte
2

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

I a
fonte
2

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.

FlorianB
fonte
A solução de namrouti com tarifa funciona bem para mim no Chrome 51.0.2704.106 / OSX 10.11.5.
Oens
2

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;
}
Ali Bagheri
fonte
1

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;
}
Giedrius Vičkus
fonte
1

Isso funcionou para mim:

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