Cambiar estilos de autocompletar en los navegadores WebKit | Programar Plus

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.

(Visited 15 times, 1 visits today)