Preenchimento automático de formulários do Google Chrome e seu plano de fundo amarelo

Tenho um problema de design com o Google Chrome e sua função de preenchimento automático de formulário. Se o Chrome se lembrar de algum login / senha, ele muda a cor de segundo plano para amarela.

Aqui estão algumas capturas de tela:

Como remover esse plano de fundo ou simplesmente desativar esse preenchimento automático?

Mude "branco" para a cor que desejar.

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

Se vocês desejam campos de entrada transparentes, podem usar a transição e o atraso da transição.

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-transition-delay: 9999s;
    -webkit-transition: color 9999s ease-out, background-color 9999s ease-out;
}

Solução aqui :

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

No Firefox, você pode desativar todo o preenchimento automático em um formulário usando o atributo autocomplete = "off / on". Da mesma forma, itens individuais podem ser configurados usando o mesmo atributo.

<form autocomplete="off" method=".." action="..">  
<input type="text" name="textboxname" autocomplete="off">

Você pode testar isso no Chrome, pois deve funcionar.

Se você deseja preservar o preenchimento automático, bem como quaisquer dados, manipuladores anexados e funcionalidade anexada aos seus elementos de entrada, tente este script:

if (navigator.userAgent.toLowerCase().indexOf("chrome") >= 0)
{
    var _interval = window.setInterval(function ()
    {
        var autofills = $('input:-webkit-autofill');
        if (autofills.length > 0)
        {
            window.clearInterval(_interval); // stop polling
            autofills.each(function()
            {
                var clone = $(this).clone(true, true);
                $(this).after(clone).remove();
            });
        }
    }, 20);
}

Ele pesquisa até encontrar qualquer elemento de preenchimento automático, clona-os incluindo dados e eventos, depois os insere no DOM no mesmo local e remove o original. Ele interrompe a pesquisa quando encontra clone, pois o preenchimento automático às vezes leva um segundo após o carregamento da página. Essa é uma variação de um exemplo de código anterior, mas mais robusto e mantém o máximo possível de funcionalidade intacta.

(Trabalho confirmado no Chrome, Firefox e IE 8.)

O CSS a seguir remove a cor de fundo amarela e a substitui por uma cor de fundo de sua escolha. Ele não desabilita o preenchimento automático e não requer hacks jQuery ou Javascript.

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

Solução copiada de: Substituir preenchimento de formulário do navegador e destaque de entrada com HTML / CSS

Trabalhou para mim, apenas a alteração de css necessária.

input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px #ffffff inset!important;
}

você pode colocar qualquer cor no lugar de #ffffff .

Um pouco hacky, mas funciona perfeitamente para mim

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

Uma combinação de respostas funcionou para mim

<style>
    input:-webkit-autofill,
    input:-webkit-autofill:hover,
    input:-webkit-autofill:focus,
    input:-webkit-autofill:active {
        -webkit-box-shadow: 0 0 0px 1000px #373e4a inset !important;
           -webkit-text-fill-color: white !important;
   }
</style>

Aqui está a versão MooTools do Jason's. Corrige-o no Safari também.

window.addEvent('domready',function() { 
    $('username').focus();

    if ((navigator.userAgent.toLowerCase().indexOf(\"chrome\") >= 0)||(navigator.userAgent.toLowerCase().indexOf(\"safari\") >= 0))
    {

        var _interval = window.setInterval(function ()
        {
            var autofills = $$('input:-webkit-autofill');
            if (autofills.length > 0)
            {

                window.clearInterval(_interval); // stop polling
                autofills.each(function(el)
                {
                    var clone = el.clone(true,true).inject(el,'after');;
                    el.dispose();
                });
            }
        }, 20);                                               


    }
});

Isso corrige o problema no Safari e no Chrome

if(navigator.userAgent.toLowerCase().indexOf("chrome") >= 0 || navigator.userAgent.toLowerCase().indexOf("safari") >= 0){
window.setInterval(function(){
    $('input:-webkit-autofill').each(function(){
        var clone = $(this).clone(true, true);
        $(this).after(clone).remove();
    });
}, 20);
}

Isso me ajudou, uma versão apenas CSS.

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

onde o branco pode ter qualquer cor que você quiser.

Eu uso isso,

input:-webkit-autofill { -webkit-box-shadow: 0 0 0px 1000px white inset !important; }
input:focus:-webkit-autofill { -webkit-box-shadow: 0 0 0px 1000px white inset !important; }
/* You can use color:#color to change the color */

Na sua tag, basta inserir esta pequena linha de código.

autocomplete="off"

No entanto, não coloque isso no campo nome de usuário / email / idname, porque se você ainda deseja usar o preenchimento automático, ele será desativado para esse campo. Mas eu encontrei uma maneira de contornar isso, basta colocar o código na sua tag de entrada de senha, porque você nunca preenche automaticamente as senhas. Essa correção deve remover a força da cor e a capacidade de preenchimento automático do seu campo de email / nome de usuário e permite evitar hacks volumosos como Jquery ou javascript.

Se você quiser se livrar completamente dele, ajustei o código nas respostas anteriores para que funcione com foco, ativo e foco:

input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:active, input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px white inset;
}

Aqui está uma solução Mootools fazendo o mesmo que a de Alessandro - substitui cada entrada afetada por uma nova.

if (Browser.chrome) {
    $$('input:-webkit-autofill').each(function(item) {
        var text = item.value;
        var name = item.get('name');
        var newEl = new Element('input');
        newEl.set('name', name);
        newEl.value = text;
        newEl.replaces(item);
    });
}

E essa solução:

if ($.browser.webkit) {
    $(function() {
        var inputs = $('input:not(.auto-complete-on)');

        inputs.attr('autocomplete', 'off');

        setTimeout(function() {
            inputs.attr('autocomplete', 'on');
        }, 100);
    });
}

Desativa o preenchimento automático e o preenchimento automático (para que os fundos amarelos desapareçam), aguarda 100 milissegundos e, em seguida, volta a funcionalidade de preenchimento automático sem preenchimento automático.

Se você tiver entradas que precisam ser preenchidas automaticamente, dê a elas a auto-complete-onclasse css.

Nenhuma das soluções funcionou para mim, as entradas de nome de usuário e senha ainda estavam sendo preenchidas e com o fundo amarelo.

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 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 permanece desativado.

Hack louco, eu sei. Mas está funcionando para mim.

Chrome 34.0.1847.116, OSX 10.7.5

A única maneira que funciona para mim foi: (jQuery necessário)

$(document).ready(function(e) {
    if ($.browser.webkit) {
        $('#input_id').val(' ').val('');
    }
});

Corrigi esse problema para um campo de senha que tenho assim:

Defina o tipo de entrada como texto em vez de senha

Remova o valor do texto de entrada com jQuery

Converta o tipo de entrada em senha com jQuery

<input type="text" class="remove-autofill">

$('.js-remove-autofill').val('');    
$('.js-remove-autofill').attr('type', 'password');

Uma atualização para a solução Arjans. Ao tentar alterar os valores, isso não deixaria você. Este trabalho é bom para mim. Quando você focaliza uma entrada, ela fica amarela. está perto o suficiente.

$(document).ready(function (){
    if(navigator.userAgent.toLowerCase().indexOf("chrome") >= 0 || navigator.userAgent.toLowerCase().indexOf("safari") >= 0){
        var id = window.setInterval(function(){
            $('input:-webkit-autofill').each(function(){
                var clone = $(this).clone(true, true);
                $(this).after(clone).remove();
            });
        }, 20);

        $('input:-webkit-autofill').focus(function(){window.clearInterval(id);});
    }
});

$('input:-webkit-autofill').focus(function(){window.clearInterval(id);});

Tente este código:

 	$(function(){
   		setTimeout(function(){
   			$('[name=user_password]').attr('type', 'password');
   		}, 1000);
   	});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<input name="user_password" type="password">

resposta namrouti tarifa está correta. Mas o fundo ainda fica amarelo quando a entrada é selecionada . A adição !importantcorrige o problema. Se você quiser também textareae selectcom o mesmo comportamento basta adicionartextarea:-webkit-autofill, select:-webkit-autofill

Somente entrada

input:-webkit-autofill {
    background-color: rgb(250, 255, 189) !important;
}

entrada, seleção, área de texto

input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {
    background-color: rgb(250, 255, 189) !important;
}

Adicionando autocomplete="off"não vai dar certo.

Altere o atributo do tipo de entrada para type="search".
O Google não aplica preenchimento automático a entradas com um tipo de pesquisa.

Espero que isso economize algum tempo.

Se você deseja evitar o piscar amarelo até que seu css seja aplicado, faça uma transição nesse bad boy da seguinte maneira:

input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px white inset !important;
    transition: background-color 10s ease-in-out 0s;
}

A solução final:

$(document).ready(function(){
    var contadorInterval = 0;
    if (navigator.userAgent.toLowerCase().indexOf("chrome") >= 0)
    {
        var _interval = window.setInterval(function ()
        {
            var autofills = $('input:-webkit-autofill');
            if (autofills.length > 0)
            {
                window.clearInterval(_interval); // stop polling
                autofills.each(function()
                {
                    var clone = $(this).clone(true, true);
                    $(this).after(clone).remove();
                    setTimeout(function(){
//                        $("#User").val('');
                        $("#Password").val('');
                    },10);
                });
            }
            contadorInterval++;
            if(contadorInterval > 50) window.clearInterval(_interval); // stop polling
        }, 20);
    }else{
        setTimeout(function(){
//            $("#User").val('');
            $("#Password").val('');
        },100);
    }
});

<input type="text" name="foo" autocomplete="off" />

Pergunta semelhante: Link

Acabei de me encontrar com a mesma pergunta. Isso funciona para mim:

form :focus {
  outline: none;
}