Quando adiciona no type de uma input o valor password e email o navegador muda o background deste input para a cor amarela e preenche os dados do usuário automaticamente. Existe uma forma de prevenir este evento:
-
Isso acontece com todos os navegadores ou vc está sendo específico a um apenas?– SamCommented 17/05/2018 às 13:48
-
Não, a pergunta foi genérica mesmo– Francis Vagner da LuzCommented 17/05/2018 às 13:50
-
Gostaria de saber se tem como prevenir em todos, se não, só no google– Francis Vagner da LuzCommented 17/05/2018 às 13:55
-
Francis vc testou ai, consegui trocar a cor?– hugocslCommented 17/05/2018 às 14:08
-
1É, depois vou investir mais nessa solução... Muito obrigado Hugo– Francis Vagner da LuzCommented 17/05/2018 às 14:34
1 Resposta
Essa cor amarela até onde sei a padrão do Chrome e vc consegue removê-la assim:
input:-webkit-autofill {
-webkit-box-shadow:0 0 0 1000px #fff inset; /* muda o background color */
-webkit-text-fill-color: #333; /* muda a cor do texto*/
}
input {
background-color: #fff;
color: #333;
}
Sobre o autocomplete vc pode tirar do form inteiro
<form autocomplete="off">
...
</form>
Ou direto no input
<input type="email" autocomplete="off">
Sobre o <input type="password">
nele o autocomplete="off"
não vai funcionar para o Password por uma questão do engine do próprio browser. Exestem outras repostas a respeito disso. Uma forma de resolver é tendo 2 campos de password. O primeiro vc coloca display:none
. O Browser em alguns casso só preenche o primeiro campo de password, então o segundo que estará visivel e vai ficar vazio...
OBS: Vc também pode fazer uma validação em duas etapas como o Google. Primeiro vc pede o e-mail e faz a validação, depois na próxima etapa vc pede o password. Assim o campo password não fica visível logo de cara pro usuário, e só aparece depois de validar o e-mail.