:autocompletar | Trucos CSS - Trucos CSS

los :auto-fill pseudo clase en CSS nos permite diseñar <input> elementos que contienen contenido autocompletado por el navegador.

Tome un nuevo formulario de registro de usuario, por ejemplo. ¿Alguna vez hizo clic o tocó un campo y vio un menú desplegable con sugerencias sobre qué ingresar?

¿Observe cómo los campos de autocompletar tienen un fondo amarillo? Así es como el navegador diseña un campo cuando contiene contenido autocompletado. :auto-fill nos permite anular o extender esto con nuestros propios estilos.

input:auto-fill { 
  outline: 5px solid rgb(0 0 0 / .5);
}

¿Cuándo ocurre el autocompletado?

Esta es una pregunta un poco complicada porque cada navegador tiene su propia configuración que permite al usuario habilitar o deshabilitar la función de autocompletar.

Entonces, solo porque haya configurado estilos de autocompletar de entrada con :auto-fill no significa que realmente sucederá. El usuario debe habilitar la finalización automática en la configuración de su navegador para que funcione la función y se apliquen los estilos.

La otra vez que puede ocurrir la finalización automática es cuando autocomplete atributo se aplica a una entrada de formulario:

<input id="name" autocomplete="name">

Pero el atributo es más una guía que una regla estricta y rápida, porque no hay forma de anular la configuración de autocompletar del navegador directamente en CSS si está deshabilitada. El estándar HTML Living parece apoyar esto en una nota:

Una forma de completar automáticamente es a través de autocomplete atributo, pero los agentes de usuario pueden autocompletar incluso sin este atributo activado.

Y en la mayoría de los casos, ese parece ser el caso, al menos en nuestras pruebas.

HTML autocomplete se puede utilizar para asignar campos específicos mediante un token que se asigna a campos específicos. Consulte las especificaciones para lista completa de fichas disponibles.

Un agente de usuario de reemplazo :auto-fill estilos

Los navegadores a menudo traen su propio estilo a la mesa. Llamamos a estos estilos de agente de usuario (UA), y son la razón por la que tenemos cosas como restablecimientos de CSS para reemplazarlos por estilos iniciales consistentes en todos los navegadores.

Anteriormente vimos que Chrome implementa amarillo claro background-color para autocompletar contenido. Los estilos UA de Chrome incluyen:

input:-internal-autofill-selected {
    appearance: menulist-button;
    background-image: none !important;
    background-color: -internal-light-dark(rgb(232, 240, 254), rgba(70, 90, 126, 0.4)) !important;
    color: fieldtext !important;
}

Según MDNanular estos estilos es algo que no podemos hacer en CSS, pero este fragmento de código de Geoff parece funcionar usando el recuadro box-shadow para cambiar la background-color durante el uso -webkit-text-fill-color para cambiar el color del texto:

input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus {
  -webkit-text-fill-color: #31b0dd;
  -webkit-box-shadow: 0 0 0px 40rem #ffff inset;
}

Demostración

Aquí hay un formulario de registro simple que acepta múltiples entradas. Tenga en cuenta que cuando autocompleta información, se activa una animación. outline Pero, oye, asegúrate de habilitar el autocompletado en la configuración de tu navegador para que funcione. Incluso entonces, es posible que el navegador necesite capturar y guardar la información del campo antes de poder hacer sugerencias.

Compatibilidad con navegador

De nuevo, ten esto en cuenta :auto-fill está definido actualmente en HTML Living Standard y no ha sido definido formalmente en las especificaciones del Grupo de Trabajo de CSSComo tal, ningún navegador está completamente implementado :auto-fill pero admite la versión prefijada del proveedor, -webkit-autofillLa tabla de compatibilidad anterior refleja la compatibilidad con la versión prefijada.

¡Trucos relacionados!