Usa la CSS :autofill para destacar los campos que se completaron (o no) automáticamente, de modo que el usuario pueda completar el formulario correctamente.
Cómo implementarlo
Para destacar un campo de formulario que el navegador completó automáticamente (y que el usuario no editó), agrega un selector a tu CSS con la clase :autofill. Se puede usar para un elemento <input>, <select> o <textarea>.
Cuando apliques diseño a los estados de autocompletado, debes seguir las prácticas recomendadas de accesibilidad:
- Indicadores de estado múltiple: No confíes solo en el color del borde para indicar el estado de autocompletado. Usa varios indicadores, como el grosor del borde y el sombreado de fondo personalizado, para asegurarte de que el estado sea perceptible.
- Preserva los indicadores de enfoque: Nunca quites los contornos de enfoque (
outline: none) sin proporcionar un reemplazo claro y de alto contraste para los usuarios de teclado.
En el siguiente ejemplo, se usa :autofill para establecer un borde y un fondo personalizados, junto con estilos de enfoque explícitos:
input:autofill,
input:-webkit-autofill {
/* Multiple indicators: use both a distinct border and background color via box-shadow to avoid color-only state */
border: 2px solid #2e7d32;
box-shadow: 0 0 0 100vmax #e8f5e9 inset;
}
/* MANDATORY: Always provide an explicit focus indicator when styling autofilled states */
input:autofill:focus-visible,
input:-webkit-autofill:focus-visible {
outline: 3px solid #000;
outline-offset: 2px;
}
Como se muestra en este ejemplo, la propiedad box-shadow se usa para personalizar el fondo, ya que background-color no se puede anular directamente en los campos autocompletados.
Usa el nombre correcto de la pseudoclase de CSS
No uses :auto-fill: es incorrecto.
OBLIGATORIO: Usa :autofill, ya que este es el nombre correcto de la seudoclase.
Estrategias de resguardo
La pseudoclase :autofill es una mejora progresiva. En los navegadores que no lo admiten, el formulario seguirá funcionando con normalidad, pero las entradas simplemente no recibirán el destacado de autocompletado personalizado. Los usuarios podrán completar el formulario correctamente. No se debe usar ningún resguardo de JavaScript adicional.