Recibimos un buen consejo de Lydia Dugger por correo electrónico con un método para cambiar los estilos que los navegadores WebKit aplican a los campos de formulario que se han completado automáticamente.
Que entendemos por autocompletar
Muchos navegadores (incluidos Chrome y Safari) proporcionan una configuración que permite a los usuarios completar automáticamente los detalles de los campos de formulario comunes. Ha visto esto al completar un formulario que solicita cosas como nombre, dirección y correo electrónico.
El problema es que los usuarios deben haber habilitado esta configuración para que este fragmento sea efectivo. Si la configuración está habilitada, los navegadores WebKit aplicarán estilo a los campos que ha completado automáticamente para el usuario, así:
¿Observa cómo los campos autocompletados tienen un fondo amarillo? A eso nos referimos y vamos a cambiar con este fragmento.
El fragmento
Podemos usar el -webkit-autofill pseudo-selector para apuntar a esos campos y diseñarlos como mejor nos parezca. El estilo predeterminado solo afecta al color de fondo, pero la mayoría de las otras propiedades se aplican aquí, como border y font-size. Incluso podemos cambiar el color del texto usando -webkit-text-fill-color que se incluye en el fragmento a continuación.
/* 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;
}Manifestación
Vea los estilos de autocompletar de cambio de lápiz en WebKit por Programar Plus(@ css-tricks) en CodePen.