Supprimer la couleur d'arrière-plan d'entrée pour la saisie semi-automatique de Chrome?
Sur un formulaire sur lequel je travaille, Chrome remplit automatiquement les champs e-mail et mot de passe. Ceci est correct, toutefois, Chrome modifie la couleur d'arrière-plan en une couleur jaune pâle.
La conception sur laquelle je travaille utilise du texte clair sur un arrière-plan sombre, alors cela gâche vraiment le look de la forme - j'ai des boîtes jaune vif et du texte blanc presque invisible. Une fois que le champ est concentré, les champs reviennent à la normale.
Est-il possible d'empêcher Chrome de changer la couleur de ces champs?
Cela fonctionne très bien. Vous pouvez modifier les styles de zone de saisie ainsi que les styles de texte dans la zone de saisie:
Ici, vous pouvez utiliser n'importe quelle couleur, par exemple. white, #DDD, rgba(102, 163, 177, 0.45).
Mais transparent ne fonctionnera pas ici.
/* Change the white to any color ;) */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
-webkit-box-shadow: 0 0 0 30px white inset !important;
}
De plus, vous pouvez utiliser ceci pour changer la couleur du texte:
/*Change text in autofill textbox*/
input:-webkit-autofill {
-webkit-text-fill-color: yellow !important;
}
Conseil: N'utilisez pas un rayon de flou excessif par centaines ou par milliers. Cela n'a aucun avantage et pourrait mettre la charge du processeur sur des appareils mobiles plus faibles. (Cela vaut également pour les ombres extérieures réelles). Pour une boîte de saisie normale d’une hauteur de 20 pixels, un rayon de flou de 30 pixels le recouvrira parfaitement.
J'ai une meilleure solution.
Définir l’arrière-plan sur une autre couleur que celle indiquée ci-dessous ne résout pas le problème car il me fallait un champ de saisie transparent
-webkit-box-shadow: 0 0 0px 1000px white inset;
Alors j'ai essayé d'autres choses et je suis venu avec ceci:
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
transition: background-color 5000s ease-in-out 0s;
}
Les solutions précédentes consistant à ajouter une ombre-boîte fonctionnent bien pour les personnes ayant besoin d'un arrière-plan de couleur unie. L’autre solution consistant à ajouter une transition fonctionne, mais le fait de devoir définir une durée/un retard signifie qu’à un moment donné, cela peut se reproduire.
Ma solution consiste à utiliser des images clés à la place. Ainsi, les couleurs de votre choix seront toujours affichées.
@-webkit-keyframes autofill {
to {
color: #666;
background: transparent;
}
}
input:-webkit-autofill {
-webkit-animation-name: autofill;
-webkit-animation-fill-mode: both;
}
Exemple de code: https://codepen.io/-Steve-/pen/dwgxPB
C’est ma solution, j’ai utilisé la transition et le délai de transition, ce qui me permet d’avoir un arrière-plan transparent sur mes champs de saisie.
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
-webkit-transition: "color 9999s ease-out, background-color 9999s ease-out";
-webkit-transition-delay: 9999s;
}
Cela a été conçu comme ce comportement de coloration a été de WebKit. Il permet à l'utilisateur de comprendre que les données ont été préremplies. Bug 1334
Vous pouvez désactiver la saisie semi-automatique en faisant (ou sur le contrôle de formulaire spécifique:
<form autocomplete="off">
...
</form
Ou vous pouvez changer la couleur du remplissage automatique en procédant comme suit:
input:-webkit-autofill {
color: #2a2a2a !important;
}
Notez qu'un bug est en cours de suivi pour que cela fonctionne à nouveau: http://code.google.com/p/chromium/issues/detail?id=46543
Ceci est un comportement WebKit.
Une solution de contournement possible pour le moment consiste à définir une ombre interne "forte":
input:-webkit-autofill {
-webkit-box-shadow:0 0 0 50px white inset; /* Change the color to your own background color */
-webkit-text-fill-color: #333;
}
input:-webkit-autofill:focus {
-webkit-box-shadow: /*your box-shadow*/,0 0 0 50px white inset;
-webkit-text-fill-color: #333;
}
essayez ceci pour masquer le style de remplissage automatique
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:active,
input:-webkit-autofill:focus {
background-color: #FFFFFF !important;
color: #555 !important;
-webkit-box-shadow: 0 0 0 1000px white inset !important;
-webkit-text-fill-color: #555555 !important;
}
Toutes les réponses ci-dessus ont fonctionné mais ont eu leurs défauts. Le code ci-dessous est une fusion de deux des réponses ci-dessus qui fonctionne parfaitement sans clignoter.
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
transition: background-color 5000s ease-in-out 0s;
-webkit-box-shadow: 0 0 0px 1000px #fff inset;
}
Après 2 heures de recherche, Google semble toujours remplacer la couleur jaune, mais je cherche la solution. C'est vrai. cela fonctionnera également pour le vol stationnaire, la concentration, etc. tout ce que vous avez à faire est d’ajouter! important.
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
-webkit-box-shadow: 0 0 0px 1000px white inset !important;
}
cela supprimera complètement le jaune des champs de saisie
TOUPET
input:-webkit-autofill
&,
&:hover,
&:focus,
&:active
transition-delay: 9999s
transition-property: background-color, color
Si vous souhaitez conserver la fonctionnalité de saisie semi-automatique intacte, vous pouvez utiliser un peu de jQuery pour supprimer le style de Chrome. J'ai écrit un court post à ce sujet ici: http://www.benjaminmiles.com/2010/11/22/fixing-google-chromes-yellow-autocomplete-styles-with-jquery/
if (navigator.userAgent.toLowerCase().indexOf("chrome") >= 0) {
$(window).load(function(){
$('input:-webkit-autofill').each(function(){
var text = $(this).val();
var name = $(this).attr('name');
$(this).after(this.outerHTML).remove();
$('input[name=' + name + ']').val(text);
});
});}
De plus:
input:-webkit-autofill{
-webkit-box-shadow: 0 0 0px 1000px white inset;
}
Vous voudrez peut-être aussi ajouter
input:-webkit-autofill:focus{
-webkit-box-shadow: 0 0 0px 1000px white inset, 0 0 8px rgba(82, 168, 236, 0.6);
}
Autrement, lorsque vous cliquez sur l’entrée, la couleur jaune reviendra. Pour le focus, si vous utilisez bootstrap, la deuxième partie concerne la bordure surlignant 0 0 8px rgba (82, 168, 236, 0.6);
De telle sorte qu'il ressemblera à n'importe quelle entrée bootstrap.
Un problème m'empêchait d'utiliser Box-shadow car j'avais besoin que le champ de saisie soit transparent. C'est un peu un hack mais du pur CSS. Définissez la transition sur une très longue période.
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
transition: background-color 50000s ease-in-out 0s, color 5000s ease-in-out 0s;
}
Essaye ça: Identique à @ Nathan-white répondez ci-dessus avec des ajustements mineurs.
/* For removing autocomplete highlight color in chrome (note: use this at bottom of your css file). */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
transition: all 5000s ease-in-out 0s;
transition-property: background-color, color;
}
J'ai développé une autre solution utilisant JavaScript sans JQuery. Si vous trouvez cela utile ou si vous décidez de republier ma solution, je vous demande simplement d'inclure mon nom. Prendre plaisir. - Daniel Fairweather
var documentForms = document.forms;
for(i = 0; i < documentForms.length; i++){
for(j = 0; j < documentForms[i].elements.length; j++){
var input = documentForms[i].elements[j];
if(input.type == "text" || input.type == "password" || input.type == null){
var text = input.value;
input.focus();
var event = document.createEvent('TextEvent');
event.initTextEvent('textInput', true, true, window, 'a');
input.dispatchEvent(event);
input.value = text;
input.blur();
}
}
}
Ce code est basé sur le fait que Google Chrome supprime le style Webkit dès que du texte supplémentaire est entré. Changer simplement la valeur du champ de saisie ne suffit pas, Chrome souhaite un événement. En vous concentrant sur chaque champ de saisie (texte, mot de passe), vous pouvez envoyer un événement de clavier (la lettre 'a'), puis définir la valeur du texte sur son état précédent (le texte rempli automatiquement). Gardez à l'esprit que ce code fonctionnera dans tous les navigateurs et vérifiera tous les champs de saisie de la page Web, et l'adaptera en fonction de vos besoins.
L'ajout d'un délai d'une heure mettrait en pause les modifications CSS sur l'élément d'entrée.
C'est plus préférable que d'ajouter une animation de transition ou une ombre interne.
input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill{
transition-delay: 3600s;
}
Pour ceux qui utilisent Compass:
@each $prefix in -webkit, -moz {
@include with-prefix($prefix) {
@each $element in input, textarea, select {
#{$element}:#{$prefix}-autofill {
@include single-box-shadow(0, 0, 0, 1000px, $white, inset);
}
}
}
}
J'ai une solution si vous voulez empêcher le remplissage automatique de Google Chrome mais que c'est un peu "machette", supprimez simplement la classe que Google Chrome ajoute à ces champs d'entrée et définissez la valeur sur "" si vous n'avez pas besoin de le montrer. stocker des données après le chargement.
$(document).ready(function () {
setTimeout(function () {
var data = $("input:-webkit-autofill");
data.each(function (i,obj) {
$(obj).removeClass("input:-webkit-autofill");
obj.value = "";
});
},1);
});
La solution de Daniel Fairweather ( Suppression de la couleur d’arrière-plan de Chrome pour la saisie semi-automatique de Chrome? ) (j’aimerais revenir sur sa solution, mais il lui faut tout de même 15 représentants) fonctionne vraiment bien. Il y a une différence énorme avec la solution la plus votée: vous pouvez conserver des images d'arrière-plan! Mais une petite modification (juste vérifier Chrome)
Et vous devez garder à l'esprit que cela ne fonctionne que sur les champs visibles!
Donc, si vous utilisez $ .show () pour votre formulaire, vous devez exécuter ce code après l'événement show ()
Ma solution complète (j'ai un bouton afficher/masquer pour le formulaire de connexion):
if (!self.isLoginVisible()) {
var container = $("#loginpage");
container.stop();
self.isLoginVisible(true);
if (navigator.userAgent.toLowerCase().indexOf("chrome") >= 0) {
var documentForms = document.forms;
for (i = 0; i < documentForms.length; i++) {
for (j = 0; j < documentForms[i].elements.length; j++) {
var input = documentForms[i].elements[j];
if (input.type == "text" || input.type == "password" || input.type == null) {
var text = input.value;
input.focus();
var event = document.createEvent('TextEvent');
event.initTextEvent('textInput', true, true, window, 'a');
input.dispatchEvent(event);
input.value = text;
input.blur();
}
}
}
}
} else {
self.hideLogon();
}
Désolé encore, je préférerais que ce soit un commentaire.
Si vous voulez, je peux mettre un lien vers le site où je l'ai utilisé.
J'ai une solution CSS pure qui utilise des filtres CSS.
filter: grayscale(100%) brightness(110%);
Le filtre de niveaux de gris remplace le jaune par le gris, puis la luminosité supprime le gris.
J'abandonne!
Puisqu'il n'y a aucun moyen de changer la couleur de l'entrée avec la saisie semi-automatique, je décide de toutes les désactiver avec jQuery pour les navigateurs Webkit. Comme ça:
if (/webkit/.test(navigator.userAgent.toLowerCase())) {
$('[autocomplete="on"]').each(function() {
$(this).attr('autocomplete', 'off');
});
}
Aucune des solutions ne fonctionnait pour moi, l'ombre incrustée ne fonctionnait pas pour moi car les entrées avaient un fond translucide superposé au fond de la page.
Je me suis donc demandé: "Comment Chrome détermine-t-il ce qui doit être rempli automatiquement sur une page donnée?"
"Est-ce qu'il recherche les identifiants d'entrée, les noms d'entrée? Identifiants de formulaire? Action de formulaire?"
Lors de mes expériences avec les entrées de nom d'utilisateur et de mot de passe, il n'y avait que deux façons pour que Chrome ne puisse pas trouver les champs à remplir automatiquement:
1) Faites passer le mot de passe avant le texte. 2) Donnez-leur le même nom et le même identifiant ... ou aucun nom ni identifiant du tout.
Après le chargement de la page, avec javascript, vous pouvez soit modifier dynamiquement l'ordre des entrées de la page, soit leur attribuer dynamiquement leur nom et leur identifiant ...
Et Chrome ne sait pas ce qui est arrivé ... la saisie semi-automatique est brisée!
Fou hack, je sais. Mais ça marche pour moi.
Chrome 34.0.1847.116, OSX 10.7.5
Merci Benjamin!
La solution Mootools est un peu plus compliquée, car je ne peux pas obtenir de champs en utilisant $('input:-webkit-autofill'). Voici donc ce que j'ai utilisé:
if (navigator.userAgent.toLowerCase().indexOf("chrome") >= 0) {
window.addEvent('load', function() {
setTimeout(clearWebkitBg, 20);
var elems = getElems();
for (var i = 0; i < elems.length; i++) {
$(elems[i]).addEvent('blur', clearWebkitBg);
}
});
}
function clearWebkitBg () {
var elems = getElems();
for (var i = 0; i < elems.length; i++) {
var oldInput = $(elems[i]);
var newInput = new Element('input', {
'name': oldInput.get('name'),
'id': oldInput.get('id'),
'type': oldInput.get('type'),
'class': oldInput.get('class'),
'value': oldInput.get('value')
});
var container = oldInput.getParent();
oldInput.destroy();
container.adopt(newInput);
}
}
function getElems() {
return ['pass', 'login']; // ids
}
Cela fonctionnera pour les entrées, textarea et sélectionne dans les états normal, survolé, actif et actif
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
textarea:-webkit-autofill:active,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus,
select:-webkit-autofill:active,
{
-webkit-box-shadow: 0 0 0px 1000px white inset !important;
}
Voici la version SCSS de la solution ci-dessus pour ceux qui travaillent avec SASS/SCSS.
input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill
{
&, &:hover, &:focus, &:active
{
-webkit-box-shadow: 0 0 0px 1000px white inset !important;
}
}
Malheureusement, aucune des solutions ci-dessus n'a fonctionné pour moi en 2016 (quelques années après la question)
Alors voici la solution agressive que j'utilise:
function remake(e){
var val = e.value;
var id = e.id;
e.outerHTML = e.outerHTML;
document.getElementById(id).value = val;
return true;
}
<input id=MustHaveAnId type=text name=email autocomplete=on onblur="remake(this)">
Fondamentalement, il supprime la balise lors de la sauvegarde de la valeur et la recrée, puis la restitue.
Comme mentionné précédemment, l'inset -webkit-box-shadow fonctionne mieux pour moi.
/* Code witch overwrites input background-color */
input:-webkit-autofill {
-webkit-box-shadow: 0 0 0px 1000px #fbfbfb inset;
}
Également un extrait de code pour changer la couleur du texte:
input:-webkit-autofill:first-line {
color: #797979;
}
je l'utilise. travaille pour moi . enlève le fond jaune du champ.
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
input:-webkit-autofill:valid,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus
{
-webkit-transition-delay: 99999s;
-webkit-text-fill-color:#D7D8CE;
}
et cela a fonctionné pour moi (Chrome 76 testé)
input:-internal-autofill-selected {
background-color: transparent;
}
L'agent utilisateur de Google Chrome empêche la CSS des développeurs. Par conséquent, pour modifier autofill, l'interface utilisateur doit utiliser une autre propriété comme celle-ci:
input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill {
-webkit-box-shadow: 0 0 0 1000px #d500ff inset !important;
/*use inset box-shadow to cover background-color*/
-webkit-text-fill-color: #ffa400 !important;
/*use text fill color to cover font color*/
}
Cela fonctionne pour moi.
.input:-webkit-autofill {transition: background-color 5000s ease-in-out 0s;}
Cela a fonctionné pour moi:
padding: 5px;
background-clip: content-box;
C'est une solution complexe pour cette tâche.
(function($){
if (navigator.userAgent.toLowerCase().indexOf("chrome") >= 0) {
$('input, select').on('change focus', function (e) {
setTimeout(function () {
$.each(
document.querySelectorAll('*:-webkit-autofill'),
function () {
var clone = $(this).clone(true, true);
$(this).after(clone).remove();
updateActions();
})
}, 300)
}).change();
}
var updateActions = function(){};// method for update input actions
updateActions(); // start on load and on rebuild
})(jQuery)*:-webkit-autofill,
*:-webkit-autofill:hover,
*:-webkit-autofill:focus,
*:-webkit-autofill:active {
/* use animation hack, if you have hard styled input */
transition: all 5000s ease-in-out 0s;
transition-property: background-color, color;
/* if input has one color, and didn't have bg-image use shadow */
-webkit-box-shadow: 0 0 0 1000px #fff inset;
/* text color */
-webkit-text-fill-color: #fff;
/* font weigth */
font-weight: 300!important;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="name" autocomplete="name"/>
<input type="email" name="email" autocomplete="email"/>Nous pouvons utiliser le pseudo-sélecteur -webkit-autofill pour cibler ces champs et les styler à notre guise. Le style par défaut n'affecte que la couleur d'arrière-plan, mais la plupart des autres propriétés s'appliquent ici, telles que la bordure et la taille de la police. Nous pouvons même changer la couleur du texte en utilisant -webkit-text-fill-color qui est inclus dans l'extrait de code ci-dessous.
/ * Modifier les styles de saisie semi-automatique dans Chrome * /
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;
-webkit-box-shadow: 0 0 0px 1000px #000 inset;
transition: background-color 5000s ease-in-out 0s;
}
Simple, il suffit d'ajouter,
autocomplete="new-password"
au champ mot de passe.