Recebemos uma boa dica de Lydia Dugger por e-mail com um método para alterar os estilos que os navegadores WebKit aplicam aos campos de formulário que foram preenchidos automaticamente.
O que queremos dizer com autocomplete
Muitos navegadores (incluindo Chrome e Safari) fornecem uma configuração que permite aos usuários preencher automaticamente os detalhes de campos de formulário comuns. Você viu isso ao preencher um formulário que pede informações como nome, endereço e e-mail.
O problema é que os usuários devem ter habilitado esta configuração para que este snippet seja eficaz. Se a configuração estiver habilitada, os navegadores WebKit definirão o estilo dos campos preenchidos automaticamente para o usuário, da seguinte forma:
Observe como os campos preenchidos automaticamente têm um fundo amarelo? É a isso que estamos nos referindo e vamos mudar com este snippet.
The Snippet
Podemos usar o -webkit-autofillpseudo-seletor para direcionar esses campos e estilizá-los como acharmos adequado. O estilo padrão afeta apenas a cor de fundo, mas a maioria das outras propriedades se aplicam aqui, como bordere font-size. Podemos até mudar a cor do texto usando o -webkit-text-fill-colorque está incluído no trecho abaixo.
/* 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; )Demo
Consulte Caneta para alterar estilos de preenchimento automático no WebKit por CSS-Tricks (@ css-tricks) no CodePen.