es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Google Chrome, Edge – autofill – no se puede anular el tamaño de fuente del autofill.

Estoy teniendo dificultades para configurar el tamaño de fuente de la entrada cuando se autocompleta en Chrome y Edge. Puedo obtener el color y el borde deseados, pero no el tamaño de fuente. Además, la altura de línea parece cambiar al valor del tamaño de fuente deseado. El tamaño de fuente correcto se aplica cuando hago clic en el contenido de la página. Sorprendentemente, todo funciona bien en Firefox.

Versión de Chrome: 97.0.4692.71

Versión de Edge: 96.0.1054.62

Versión de Firefox: 95.0.2

Regla CSS que estoy usando actualmente para lograr eso:

input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  border: 1px solid green;
  -webkit-text-fill-color: green;
  font-size: 24px !important;
}

¡Gracias!

Tags:  , ,

Answer

  1. Avatar for davy.ai

    Parece que establecer la propiedad font-size para los inputs con autofill en Chrome y Edge no está funcionando como se esperaba, y también se ve afectada la line-height. La regla CSS que se está utilizando para apuntar a los inputs con autofill es:

    input:-webkit-autofill,
    input:-webkit-autofill:hover, 
    input:-webkit-autofill:focus,
    textarea:-webkit-autofill,
    textarea:-webkit-autofill:hover,
    textarea:-webkit-autofill:focus,
    select:-webkit-autofill,
    select:-webkit-autofill:hover,
    select:-webkit-autofill:focus {
      border: 1px solid green;
      -webkit-text-fill-color: green;
      font-size: 24px !important;
    } 
    

    Si bien el borde y el color del texto se aplican correctamente, parece que se ignora el font-size. Además, la line-height se establece con el mismo valor que el font-size deseado.

    Esto parece ser un problema específico de Chrome y Edge, ya que Firefox no muestra el mismo comportamiento. Hacer clic en el contenido de la página en Chrome y Edge corregirá el font-size, pero esto no es ideal para los usuarios.

    Es posible que sea necesario realizar una investigación adicional para determinar si existe una solución alternativa o enfoque que pueda lograr el resultado deseado en Chrome y Edge.

Comments are closed.