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.
Qué 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? Eso es a lo que nos referimos y vamos a cambiar con este fragmento.
El fragmento
Podemos usar el -webkit-autofillpseudo-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 demás propiedades se aplican aquí, como bordery font-size. Incluso podemos cambiar el color del texto usando el -webkit-text-fill-colorque se incluye en el fragmento de abajo.
/* 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 CSS-Tricks (@ css-tricks) en CodePen.