0
998
ViewsTamaño de fuente de Autocompletar CSS
No pude descifrar cómo aumentar o cómo usar el tamaño de fuente predeterminado para el texto de vista previa al pasar el mouse sobre una sugerencia de autocompletar desde el navegador.
Estoy usando https://tailwindcss.com/ para todos los estilos.
P.ej:
Este es mi elemento de entrada normal con el tamaño de fuente predeterminado después de ingresar algo de texto:
Y este es el tamaño de fuente de la vista previa cuando coloco uno de los elementos de autocompletar sugeridos:
Como puedes ver, el tamaño de letra es mucho más pequeño que en la primera imagen.
Ya estoy usando un fragmento de CSS para deshabilitar todos los estilos específicos del navegador:
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: inherit; -webkit-text-fill-color: inherit; -webkit-box-shadow: inherit; transition: background-color 5000s ease-in-out 0s; font-size: inherit; } La última propiedad font-size no hace nada.
Estoy usando el siguiente css para el tamaño de fuente de entrada:
font-size: 1.125rem !important;También traté de asignar el tamaño de fuente como estilo en línea para solucionarlo, pero tampoco funciona:
Ejemplo en vivo: https://codesandbox.io/s/o766kp4z05 Use el ejemplo e intente ingresar su correo electrónico en el campo de correo electrónico y observe el tamaño de fuente. Tiene el mismo problema con el tamaño de fuente.
¿Es posible arreglar el tamaño de la fuente?
5 answers
Answer question0
Parece que el tamaño de fuente está anulando. ¿Puedes probar con los estilos con un enfoque principal más jerárquico?
0
Sobrescribir el estilo del agente de usuario a veces puede ser complicado. Encontré este artículo que habla sobre estilo de autocompletado de entrada ( https://css-tricks.com/snippets/css/change-autocomplete-styles-webkit-browsers/ ) pero es un fragmento muy similar a lo que ya está usando y no resuelve el problema que preguntaste. Me temo que puede ser una de las dos partes de los elementos nativos que actualmente no podemos diseñar.
Otro problema similar es que si tiene una imagen de fondo fija configurada para el elemento de entrada, un ícono de un candado configurado en el borde para un campo de contraseña, por ejemplo, y luego usa la función de autocompletar para el formulario, la imagen de fondo será completamente desaparecer y no hay nada que se pueda hacer para arreglarlo actualmente. Solo una de las cosas con las que tenemos que lidiar y decirles a los clientes que no es posible.
0
¡Esto es muy complicado! jugué con esto
:-internal-autofill-previewed { font-size: 22px !important; } El :-internal-autofill-previewed::placeholder parpadeante ( | ) cambia cuando se desplaza, pero el "marcador de posición" sigue siendo el mismo.
0
Sé que esta pregunta es antigua, pero encontré esta solución, que funciona en mi caso:
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active { -webkit-animation: autofill 0s forwards; animation: autofill 0s forwards; } @keyframes autofill { 100% { background: transparent; color: inherit; font-size: inherit; } } @-webkit-keyframes autofill { 100% { background: transparent; color: inherit; font-size: inherit; } }Si no desea que cambie el fondo o el color de la fuente, puede eliminarlos de los fotogramas clave.
¡Gracias!
0
EDITAR: Esto ya no funciona para el tamaño de fuente, y potencialmente más atributos en el futuro
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; } }