J'essaie de masquer le style de remplissage automatique pour un champ de saisie de mot de passe qui arrive via les styles user-agent-styles.
Lors de l'inspection de l'élément, les styles calculés montrent que la couleur provient du style user-agent est remplacé et #fff est appliqué, mais le style réel calculé est toujours celui qui provient de l'agent utilisateur.
Une idée sur la façon de se débarrasser de cela?
Voici le CSS que j'utilise pour essayer de le remplacer:
.password {
border-right: none;
background-color: #fff !important;
}
#MainContent_txtPassword:-webkit-autofill, input:-internal-autofill-
previewed, input:-internal-autofill-selected, textarea:-internal-autofill-
previewed, textarea:-internal-autofill-selected, select:-internal-autofill-
previewed, select:-internal-autofill-selected {
background-color: white !important;
}
3 Réponses :
Ce comportement n'est visible que dans Chrome (ce n'est pas dans Firefox, je n'ai pas testé Edge ou autres). Chrome applique un arrière-plan jaune pâle (# E8F0FE) et du texte noir à toutes les entrées remplies automatiquement. Ce style d'agent utilisateur pour le texte rempli automatiquement a une priorité codée en dur dans le rendu de Chrome depuis la version 74 de Chrome. Ce comportement est prévu par les développeurs Chrome.
Dans Chrome, ces styles codés en dur remplaceront tout ce que vous pouvez définir vous-même dans le document ou via Javascript. Dans la question d'origine, l'inspecteur de style montre le style background-color: white! Important de l'OP comme ayant la priorité sur le style de l'agent utilisateur input: -internal-autofill-selected . L'inspecteur de style a tort de montrer cela: il semble qu'il ne sache pas que le style de l'agent utilisateur pour le texte rempli automatiquement a une priorité codée en dur.
J'ai reproduit le problème de l'OP dans un ( codepen ). Notez que j'ai même essayé de mettre à jour le style user-agent input: -internal-autofill-selected dans le propre CSS du document, avec le suffixe ! Important . Même avec cela dans le CSS, Chrome utilise toujours le style d'agent utilisateur d'origine codé en dur. Ce codepen vous montre également qu'aucune des méthodes suivantes ne sera efficace pour remplacer le style de l'agent utilisateur dans Chrome.
backgroundColor ) après la saisie des données Cela a été signalé à Chrome comme un bogue. La réponse des développeurs est WontFix , citant une sécurité préoccupation. Les développeurs de Chrome ne disent pas quel est le problème de sécurité, mais je suppose qu'un site malveillant pourrait créer du HTML avec des zones de saisie masquées (pas de bordure, et des couleurs d'arrière-plan et de premier plan correspondant à l'arrière-plan de la page) et rassembler certaines données remplies automatiquement à l'insu de l'utilisateur .
Cette attitude "WontFix" n'est pas une excellente solution. Cela agace les concepteurs qui souhaitent contrôler l'apparence des boîtes de saisie. L'OP veut un fond blanc pur et Chrome le change en # E8F0FE, ce qui n'est peut-être pas un gros problème, mais c'est bien pire pour les concepteurs qui souhaitent utiliser un fond sombre . Dans quelle mesure serait-il difficile pour Chrome de vérifier par programme que la page a stylisé la zone de saisie avec un contraste suffisamment élevé pour être visible par l'utilisateur? Chrome n'a pas non plus totalement résolu le problème de sécurité, car un site malveillant peut masquer une zone de saisie d'une autre manière: il peut être en dehors de la zone d'écran visible ou couvert par un élément de page différent.
J'ai trouvé une réponse qui fonctionne pour moi! Voir https : //webagility.com/posts/the-ultimate-list-of-hacks-for-chromes-forced-yellow-background-on-autocompleted-inputs
J'étais d'abord tombé sur https://css-tricks.com/snippets/css/change-autocomplete -styles-webkit-browser / mais cela ne fonctionne que pour les arrière-plans opaques et non transparents. L'article Webagility comprend également un bon hack pour les arrière-plans transparents.
Pour résumer les deux articles, la solution que j'ai appliquée est:
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 {
-webkit-transition-delay: 99999s;
}
La raison pour laquelle cela fonctionne est que Chrome applique des styles de saisie semi-automatique via une transition css. Si vous retardez toutes les transitions sur cette entrée, les styles ne seront jamais appliqués.
J'ai eu un problème similaire en essayant de styliser la couleur d'arrière-plan d'un élément d'option de sélection lorsque : coché .
J'utilise des pseudo éléments pour ajouter des cases à cocher à un élément de sélection où plusieurs sélections sont autorisées et ne voulait pas que la ligne entière soit affichée comme étant sélectionnée.
J'ai trouvé que le passage à une autre couleur n'avait aucun effet sur la feuille de style de l'agent utilisateur (Chrome), mais en utilisant un dégradé comme arrière-plan.
option:checked {
background: linear-gradient(0, #fff, #fff);
}