Tengo un formulario de inicio de sesión con entradas de nombre de usuario y contraseña. En Chrome en Windows (no ocurre en otros navegadores ni en una Mac), al pasar el cursor sobre un nombre de usuario guardado desde el administrador de contraseñas de Chrome, la fuente cambia. El cambio de fuente luego cambia el ancho de la entrada, lo que desequilibra mi alineación.
Obviamente, puedo establecer un ancho fijo en mi entrada para guardar mi alineación, pero eso realmente no resuelve el problema, solo le pone una curita. Lo que realmente quiero es evitar el cambio de fuente en primer lugar.
Intenté apuntar a la entrada con :-webkit-autofill y poner !important en todo el css de mi entrada solo para ver si algo se mantendría pero no dados.
Codepen aquí . Deberá estar en Chrome en Windows y usar el administrador de contraseñas de Google.
HTML:
<form> <label> <input type="text" name="username" placeholder="Username" required /> </label> <label> <input type="password" name="password" placeholder="Password" required /> </label> <button type="submit">Login</button> </form>SCSS:
// setting font for more exaggerated difference * { font-family: Times, "Times New Roman", serif; } // why doesn't this or anything else work? input { &:-webkit-auto-fill { &, &:hover, &:focus { font-family: Times, "Times New Roman", serif !important; } } }Cualquier pista sobre cómo prevenir este cambio de fuente sería apreciada.
Aquí hay una solución que funcionó para mí en 2021 para evitar que Chrome cambie la fuente en los campos de entrada de contraseña/nombre de usuario:
input#username { font-family: "Rubik"; font-weight: bold; color: blue; } input:-webkit-autofill::first-line { color: red; font-family: "Rubik"; font-weight: bold; } <link href="https://fonts.googleapis.com/css?family=Rubik&display=swap" rel="stylesheet"> <input id="username" name="username"></input> También noté que, por alguna razón display: flex entra en conflicto con ese código, eche un vistazo:
input#username { font-family: "Rubik"; color: blue; font-weight: bold; display: flex; } input:-webkit-autofill::first-line { color: red; font-family: "Rubik"; font-weight: bold; } <link href="https://fonts.googleapis.com/css?family=Rubik&display=swap" rel="stylesheet"> <input id="username"></input>A partir de ahora parece que no hay forma de cambiar esto en Chrome. Definitivamente lo llamaría un error.
Sin embargo, una solución decente es configurar la font-family para todas las entradas autocompletables o entradas dentro de formularios que tienen capacidades de autocompletar para esto:
font-family: -apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Ubuntu, Arial, sans-serif;
Esta es una excelente solución multiplataforma y multinavegador porque simplemente toma la fuente de su sistema, que es exactamente lo que Chrome parece estar haciendo para su fuente de autocompletar.
También asegura que sus formularios tendrán fuentes legibles en cualquier sistema operativo que esté usando su usuario.
Este parece ser un cambio reciente en Chrome: Problema 953689: los valores de formulario ingresados anteriormente anulan el estilo cuando se pasa el mouse sobre . Por lo que he visto, esto sucede tanto en macOS como en Windows, en cualquier lugar donde se presente el autocompletado al usuario final. Aparentemente, esto se hizo intencionalmente para solucionar un problema de seguridad con la implementación anterior: Problema 916838: Seguridad: dos fallas de autocompletar juntas permiten que los sitios lean de manera invisible los números de tarjetas de crédito después de presionar una sola tecla
No parece haber una forma de anular esos nuevos estilos en este momento: si el cambio en los estilos es realmente demasiado desagradable, puede deshabilitar el autocompletado ( Deshabilitar Chrome Autofill ) o configurar los estilos de fuente de su campo ( font-family , font-weight , font-style de font-size para que coincida con las sugerencias de autocompletar de Chrome, como se sugiere aquí: https://stackoverflow.com/a/56997845/1798491 )
No me ejecuto en Windows, pero ¿ha intentado apuntar a la etiqueta y al formulario también? Re: especificidad css. A continuación, intente autocompletar web-kit en todos
¡prueba esto!
&:-webkit-autofill::first-line, &:-webkit-autofill, &:-webkit-autofill:hover, &:-webkit-autofill:focus, &:-webkit-autofill:active { font-family: Times, "Times New Roman", serif !important; }aunque es posible que solo necesites esto
&:-webkit-autofill::first-linelos otros son por si acaso
Cómo cambiar los estilos de autocompletar de Chrome en la entrada:
input { ... font-family: $body-font; font-size: 1rem; font-weight: bold; color: #000; background-color: #fff; // Background color &:-webkit-autofill { -webkit-box-shadow: 0 0 0 1000px #fff inset; } // Font styles &:-webkit-autofill::first-line { font-family: $body-font; font-size: 1rem; font-weight: bold; // color: green; }}