Superar el desafío de cambio de fuente de autocompletar de Chrome

Cuando te encuentres con la función de autocompletar de Chrome en Windows, puedes encontrarte con un molesto problema de cambio de fuente. Al pasar el cursor sobre los nombres de usuario guardados, el tamaño y el estilo de la fuente se modifican, lo que altera la alineación del formulario. Si bien puedes aplicar un ancho fijo a la entrada para mitigar este problema, una solución más efectiva consiste en evitar el cambio de fuente por completo.

Para lograr esto, puedes utilizar reglas CSS dirigidas específicamente a :-webkit-autofill pseudoclase. Esta pseudoclase se aplica a las regiones del formulario que el administrador de contraseñas de Chrome completa automáticamente. Al aplicar importante a la propiedad de familia de fuentes dentro de esta regla, puedes anular el comportamiento predeterminado de Chrome y mantener la configuración de fuente deseada.

Aquí tienes un ejemplo de cómo puedes implementar esto en SCSS:

input {
  &:-webkit-autofill {
    &,
    &:hover,
    &:focus {
      font-family: Times, "Times New Roman", serif !important;
    }
  }
}

Como alternativa, es posible que solo requieras la siguiente regla:

input {
  &:-webkit-autofill::first-line {
    font-family: Times, "Times New Roman", serif !important;
  }
}

El pseudoelemento ::first-line apunta a la primera línea de la entrada, que normalmente es donde ocurre el autocompletar.

Al incorporar estas reglas CSS, puedes prevenir de manera efectiva el autocompletar de Chrome. cambio de fuente, preservando la alineación y la estética de su formulario de inicio de sesión.