Como impedir o Chrome de amarelar as caixas de entrada do meu site?

Entre outros textos e recursos visuais em um envio de formulário, pós-validação, estou colorindo minhas caixas de entrada em vermelho para indicar a área interativa que precisa de atenção.

No Chrome (e para usuários da Barra de Ferramentas Google), o recurso de preenchimento automático volta a colorir meus formulários de entrada em amarelo. Aqui está a questão complexa: desejo que o preenchimento automático seja permitido nos meus formulários, pois acelera o login dos usuários. Vou verificar a capacidade de desativar o atributo de preenchimento automático se / quando ocorrer um erro, mas é um processo complexo um pouco de codificação para desativar programaticamente o preenchimento automático da única entrada afetada em uma página. Simplificando, isso seria uma grande dor de cabeça.

Então, para tentar evitar esse problema, existe algum método mais simples de impedir que o Chrome recolorir as caixas de entrada?

[edit] Tentei a sugestão importante abaixo e ela não teve efeito. Ainda não verifiquei a Barra de Ferramentas Google para ver se o atributo! Important funcionaria para isso.

Até onde eu sei, não há outro meio senão usar o atributo de preenchimento automático (que parece funcionar).

Eu sei que no Firefox você pode usar o atributo autocomplete = "off" para desativar a funcionalidade de preenchimento automático. Se isso funcionar no Chrome (não foi testado), você poderá definir esse atributo quando um erro for encontrado.

Isso pode ser usado para um único elemento

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

... bem como para um formulário inteiro

<form autocomplete="off" ...>

Defina a propriedade de estrutura de tópicos CSS como none.

input[type="text"], input[type="password"], textarea, select { 
    outline: none;
}

Nos casos em que o navegador também pode adicionar uma cor de fundo, isso pode ser corrigido por algo como

:focus { background-color: #fff; }

é exatamente isso que você está procurando!

// Just change "red" to any color
input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px red inset;
}

Usando um pouco de jQuery, você pode remover o estilo do Chrome, mantendo intacta a funcionalidade de preenchimento automático. 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);
    });
});}

Para remover a borda de todos os campos, você pode usar o seguinte:

*:focus { outline:none; }

Para remover a borda dos campos selecionados, basta aplicar esta classe aos campos de entrada que você deseja:

.nohighlight:focus { outline:none; }

Obviamente, você também pode alterar a fronteira como desejar:

.changeborder:focus { outline:Blue Solid 4px; }

(De Bill Beckelman: Substitua a borda automática do Chrome em torno dos campos ativos usando CSS )

Sim, seria uma grande dor de cabeça, que na minha opinião não vale o retorno. Talvez você possa ajustar um pouco sua estratégia de interface do usuário e, em vez de pintar a caixa de vermelho, você pode colorir as bordas de vermelho ou colocar uma pequena fita vermelha ao lado (como a fita "Carregando" do gmails) que desaparece quando a caixa está foco.

É um pedaço de bolo com jQuery:

if ($.browser.webkit) {
    $("input").attr('autocomplete','off');
}

Ou, se você quiser ser um pouco mais seletivo, adicione um nome de classe para um seletor.

A maneira mais simples na minha opinião é:

1. Obtenha http://www.quirksmode.org/js/detect.html

2. Use este código:

   if (BrowserDetect.browser == "Chrome") {
     jQuery('form').attr('autocomplete','off');
   };

Depois de aplicar a solução de @Benjamin, descobri que pressionar o botão Voltar ainda me daria o destaque amarelo.

De alguma forma, minha solução para impedir que esse destaque amarelo volte é aplicando o seguinte javascript jQuery:

<script type="text/javascript">
    $(function() {
        if (navigator.userAgent.toLowerCase().indexOf("chrome") >= 0) {
        var intervalId = 0;
            $(window).load(function() {
                intervalId = setInterval(function () { // << somehow  this does the trick!
                    if ($('input:-webkit-autofill').length > 0) {
                        clearInterval(intervalId);
                        $('input:-webkit-autofill').each(function () {
                            var text = $(this).val();
                            var name = $(this).attr('name');
                            $(this).after(this.outerHTML).remove();
                            $('input[name=' + name + ']').val(text);
                        });
                    }
                }, 1);
            });
        }
    });
</script>

Espero que ajude alguém !!

Isso funciona. O melhor de tudo é que você pode usar valores rgba (o box-shadow inset hack não funciona com rgba). Este é um pequeno ajuste na resposta de @ Benjamin. Estou usando $ (document) .ready () em vez de $ (window) .load (). Parece funcionar melhor para mim - agora há muito menos FOUC. Não acredito que haja desvantagens no uso de $ (document) .ready ().

if (navigator.userAgent.toLowerCase().indexOf("chrome") >= 0) {
    $(document).ready(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);
        });
    });
};

para as versões de hoje, isso também funciona se for colocado em uma das duas entradas de login. Corrija também a versão 40+ e o problema tardio do Firefox.

<input readonly="readonly" onfocus="this.removeAttribute('readonly');" />

input:focus { outline:none; }

Isso funcionou muito bem para mim, mas é mais provável que você mantenha as coisas uniformes em seu site, incluindo também isso no CSS para áreas de texto:

textarea:focus { outline:none; }

Também pode parecer óbvio para a maioria, mas para iniciantes, você também pode configurá-lo para uma cor como tal:

input:focus { outline:#HEXCOD SOLID 2px ; }

Se bem me lembro, uma regra importante na folha de estilo para a cor de fundo das entradas substituirá o preenchimento automático da barra de ferramentas do Google - presumivelmente o mesmo seria verdade no Chrome.