Personalizar el autocomplete de chrome con css

Muchas veces vemos el estilo de nuestros formularios muy bien hasta que google chrome decide hacer un autocomplete de algún dato que el usuario use frecuentemente. Bueno aquí dejo un método para cambiar los estilos que los navegadores WebKit aplican a los campos de formulario que se han completado automáticamente.

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