web-dev-qa-db-fra.com

CSS Autocomplete Taille de la police

Je ne pouvais pas comprendre comment augmenter ou utiliser la taille de la police par défaut du texte de prévisualisation lorsque vous planifiez une suggestion automatique du navigateur.

J'utilise https://tailwindcss.com/ pour tous les styles.

Par exemple.:

Ceci est mon élément d'entrée normal avec la taille de la police par défaut après avoir entré du texte:

enter image description here

Et ceci est la taille de la police de l'aperçu lorsque je survole l'un des éléments autocompresseurs suggérés:

enter image description here

Comme vous pouvez le constater, la taille de la police est beaucoup plus petite que de la première image.

enter image description here

J'utilise déjà un extrait de CSS-CSS pour désactiver tous les styles spécifiques au navigateur:

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 dernière propriété font-size ne fait rien.

J'utilise les CSS suivants pour la taille de la police d'entrée:

    font-size: 1.125rem !important;

J'ai également essayé d'attribuer la taille de la police comme un style inline pour le réparer, mais cela ne fonctionne pas aussi:

enter image description here

Exemple en direct: https://codesandbox.io/s/o766kp4z05 Utilisez l'exemple et essayez de saisir votre email dans le champ Email et regardez la taille de la police. Il a le même problème avec la taille de la police.

Est-il possible de réparer la taille de la police?

Cordialement, Patrick

cssinputautocompletefont-sizetailwind-css
37
Patrick Wozniak

C'est très délicat! J'ai joué avec ça

:-internal-autofill-previewed {
  font-size: 22px !important;
}

Le marqueur clignotant (|) change lors de la navigation, mais le "espace réservé" est toujours le même .. :-internal-autofill-previewed::placeholder n'a pas fonctionné non plus ..

0
Lumi

L'écrasement de l'agent utilisateur peut parfois être délicat. J'ai trouvé cet article qui parle de l'entrée de styling d'entrée automatique ( https://css -tricks.com/snippets/css/Change-autocomplete-styles-webkit-browsers/ ) mais c'est un extrait très similaire à ce que vous utilisez déjà et cela ne résout pas le problème que vous avez demandé. J'ai bien peur que ce soit l'une des deux parties d'éléments indigènes que nous ne pouvons actuellement pas styles.

Un autre problème similaire est que si vous avez une image de fond fixe définie pour l'élément d'entrée, une icône d'un verrouillage défini sur le bord d'un champ de mot de passe, par exemple, puis vous utilisez la fonctionnalité Autocomplete pour le formulaire, l'image d'arrière-plan sera complètement. disparaître et il n'y a rien qui puisse être fait pour le réparer actuellement. Une des choses que nous devons traiter et dire aux clients que ce n'est pas possible.

0
Stephen M Irving