Como posso parar Chrome da amarelecimento caixas de entrada do meu site?

Question

Entre outras ajudas de texto e visuais em um formulário de submissão, pós-validação, estou colorindo minhas caixas de entrada vermelho para significar a área interativa precisando de atenção.

No Chrome (e para os usuários do Google Toolbar) as auto-suficiência de recursos re-cores a minha entrada amarelo formas. Aqui está a questão complexa: Quero autocomplete permitido em minhas formas, como ele acelera os usuários login Vou verificar na capacidade de transformar o atributo autocomplete para fora se / quando há um erro acionado, mas é um complexo. bit de codificação para transformar programaticamente fora do auto-completar para a entrada afetada única em uma página. Isso, para colocá-lo simplesmente, seria uma grande dor de cabeça.

Assim, para tentar evitar essa questão, existe algum método mais simples de parar Chrome da re-colorir as caixas de entrada?

[editar] Eu tentei o! Importante sugestão abaixo e não teve nenhum efeito. Eu ainda não tenho verificado Google Toolbar para ver se o! Atributo importante iria trabalhar para isso.

Tanto quanto eu posso dizer, não há quaisquer outros do que usar o atributo autocomplete (que parece trabalho) meios.

Answer 1

Eu sei que no Firefox você pode usar o autocomplete atributo = "off" para desativar a funcionalidade autocomplete. Se isso funciona em Chrome (não testadas), você pode definir esse atributo quando um erro é encontrado.

Isto pode ser usado tanto para um único elemento

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

..., bem como para um formulário inteiro

<form autocomplete="off" ...>

Answer 2

Defina a propriedade esboço CSS a nenhum deles.

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

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

:focus { background-color: #fff; }

Answer 3

este é exatamente o que você está procurando!

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

Answer 4

Usando um pouco de jQuery você pode remover styling do Chrome, mantendo a funcionalidade autocomplete intacta. I escreveu um curto post sobre isso aqui: http://www.benjaminmiles.com/2010 / 11/22 / fixação de google-cromos-amarelo-autocomplete-estilos-com-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);
    });
});}

Answer 5

Para remover o limite para todos os campos que você pode usar o seguinte:

*:focus { outline:none; }

Para remover o limite de campos selecionados apenas aplicar essa classe para os campos de entrada que você quer:

.nohighlight:focus { outline:none; }

Você pode, naturalmente, alterar a borda como você deseja assim:

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

(De Bill Beckelman: substituir Border automática do Chrome Cerca Ativo Campos Usando CSS )

Answer 6

Sim, seria uma grande dor de cabeça, que na minha opinião vale a pena is not o retorno. Talvez você possa ajustar sua estratégia UI um pouco, e em vez de colorir a caixa vermelha, você pode colorir as bordas vermelhas, ou colocar uma pequena fita vermelha ao lado dele (como os gmails "carregamento" de fita), que desaparece quando a caixa está em foco.

Answer 7

É 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.

Answer 8

A forma mais simples na minha opinião é a seguinte:

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

2. Use este código:

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

Answer 9

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

A minha solução de alguma forma para evitar que esse realce amarelo para voltar é pela aplicação da 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>

Hope isso ajuda ninguém !!

Answer 10

Isso funciona. O melhor de tudo, você pode usar valores RGBA (a inserção corte box-shadow não funciona com rgba). Este é um ligeiro ajuste da resposta de @ Benjamin. Eu estou usando $ (document) .ready () em vez de $ (janela) .load (). Parece que funciona melhor para mim - agora há muito menos FOUC. Eu não acredito que há e desvantagens de se utilizar $ (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);
        });
    });
};

Answer 11

para versões de hoje, isso funciona muito se colocado em uma das duas entradas de login. Também corrigir a versão 40+ e emissão Firefox tarde.

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

Answer 12

input:focus { outline:none; }

Isso funcionou muito bem para mim, mas mais do que provável para manter as coisas uniforme em seu site o seu vai querer também incluir isto em seu CSS para textareas:

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

Answer 13

!

Se bem me lembro, uma regra importante na folha de estilo para a cor das entradas fundo irá substituir o Google toolbar autocomplete -. Presumivelmente o mesmo seria verdadeiro de Chrome