Estoy creando un modal de inicio de sesión y me gustaría usar etiquetas de entrada para permitir que los navegadores completen automáticamente el nombre de usuario y la contraseña; sin embargo, tengo dificultades para restablecer completamente el estilo de la hoja de estilo del agente de usuario para las etiquetas de entrada. Cada vez que autocompletar hace lo suyo, vuelve el estilo antiguo.
Aquí está mi formulario de inicio de sesión de reacción (simplificado):
<form id="login-popup-container"> <div className="login-field-container"> <div className="login-value-title user">email</div> <input className="answer login-info" type="text" /> </div> <div className="login-field-container"> <div className="login-value-title password">password</div> <input className="answer login-info" type="password" /> </div> </form>He agregado esto en mi index.css:
input, input:focus, input:active, input:hover, input:-webkit-autofill, input:autofill, input:indeterminate, input:enabled, input:valid { outline: none !important; border:none !important; background-image:none !important; background-color:transparent !important; -webkit-box-shadow: none !important; -moz-box-shadow: none !important; box-shadow: none !important; }Funciona en un navegador de incógnito de Chrome lo suficientemente bien
Pero en una pestaña de Chrome normal , cuando Chrome realiza el llenado automático, esta acción devuelve el estilo de la hoja de estilo del agente de usuario a los elementos de entrada como este . Como puede ver arriba, he intentado agregar todas las pseudoclases que se me ocurrieron al estilo de restablecimiento de la etiqueta de entrada, pero sin éxito.
¿Alguien ha experimentado este problema antes / sabe por qué sucede esto?
Para cualquiera que experimente este problema... la respuesta a mi pregunta resultó ser una combinación de la respuesta de Zach Jensz y la adición de un retraso de transición a los elementos <input> . Definitivamente es más un truco que una respuesta, pero para mí funciona.
Mi restablecimiento de css se ve así:
input { all: unset; } input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active { transition: all 5000s ease-in-out 0s; }y mi estilo para las entradas se ve así:
.classname-used-for-my-inputs { background: transparent; background-color: transparent; color: white; border: none; }La razón por la que el retraso es necesario es porque incluso después de desarmar todos los estilos, al autocompletar el evento de correo electrónico/contraseña, los estilos del Agente de usuario seguían apareciendo (no pude averiguar cómo evitar esto). Pero al menos ahora el tiempo de retraso es tan largo que, a todos los efectos prácticos, nadie los notará y, por lo tanto, para mis propósitos funciona.
Si alguien explica por qué / propone una solución no pirateada, actualizaré esto.
¡No puede anular los estilos de UA con !importante
Las hojas de estilo del agente de usuario de muchos navegadores usan !important en sus declaraciones de estilo :-webkit-autofill, lo que las hace no anulables por páginas web sin recurrir a hacks de JavaScript. https://developer.mozilla.org/en-US/docs/Web/CSS/:autocompletar
¡Además, restablezca de manera más eficiente cada estilo en sus entradas con la propiedad CSS all !
input { all: unset; }Puede utilizar estos valores globales: