Suppression de l'entrée de la couleur de fond pour Chrome saisie semi-automatique?

Sur un formulaire sur lequel je travaille, Chrome est auto-remplissage de l'e-mail et le mot de passe dans les champs. C'est très bien, cependant, Chrome, modifie la couleur d'arrière-plan de couleur jaune pâle.

Le design je suis sur l'aide de texte clair sur un fond sombre, donc cela a vraiment crée l'allure de la forme - j'ai stark boîtes jaunes et quasi-invisible du texte blanc. Une fois que le champ est concentré, les champs de retour à la normale.

Est-il possible d'arrêter de Chrome de changer la couleur de ces champs?

Ici vous avez des informations plus étendues: stackoverflow.com/questions/2338102/...
Voir ma réponse à un autre post: stackoverflow.com/a/13691346/336235

InformationsquelleAutor DisgruntledGoat | 2010-05-06

1049

Cela fonctionne bien, Vous pouvez changer la zone de saisie de styles ainsi que des styles de texte à l'intérieur de l'entrée de la boîte :

Ici, vous pouvez utiliser n'importe quelle couleur par exemple white, #DDD, rgba(102, 163, 177, 0.45).

Mais transparent ne marchera 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;
}
```
En outre, vous pouvez l'utiliser pour changer la couleur du texte:
```
/*Change text in autofill textbox*/
input:-webkit-autofill {
    -webkit-text-fill-color: yellow !important;
}
```
Conseils: N'utilisez pas un excès de rayon de flou dans les centaines ou les milliers. Cela n'a pas d'avantages et risque de mettre la charge des processeurs les plus faibles sur les appareils mobiles. (Vrai aussi pour les réels, à l'extérieur des ombres). Pour une zone de saisie de 20px de hauteur, 30px ‘rayon de flou’ sera parfaitement couvrir.
- Hey, C'est un travail ! (vous pouvez changer la couleur bien sûr, mais pas transparent. De toute façon, vous aurez besoin d'une couleur unie) Merci !...
- déjà mentionné... mais pourquoi ne sommes-nous pas en mesure de définir le bg de transparence?
- parce que nous ne sommes pas supprimer le jaune bg nous au lieu d'utiliser une délicate façon de couvrir le jaune bg à l'aide d'un blanc ombre interne
- Je n'aime pas ce hack car alors je ne peux pas utiliser en médaillon de l'ombre sur mes champs de saisie pour ajouter une belle "en retrait" look. Je ne vois vraiment pas ce que la meilleure solution...
- Vous pouvez séparées par des virgules une liste de creux des ombres pour créer vous-en retrait de l'effet tout en encore suppression de l'arrière-plan jaune.
- bon point @AlexLittlejohn thumbs up pour cette
- et si vous souhaitez définir la couleur du texte: -webkit-text-fill-color: #838B95 !important;
- hack sympa! merci pour le partage 🙂
- en outre ajouter ` entrée:-webkit-remplissage automatique:hover, entrée:-webkit-remplissage automatique:focus " pour obtenir la couleur jaune cligna des yeux..
- travail dosnt pour moi. si c'est qu'ils ont choisi de bloquer ce correctif sur les versions suivantes, alors im heureux j'utilise firefox
- ce hack ne fonctionne que pour les navigateurs webkit pour firefox, vous pouvez essayer d'utiliser -moz-box-shadow et d'entrée:-moz-remplissage automatique ou rechercher un autre hack
- Œuvres! Parfait!
- Vous, monsieur, méritent plus upvotes
- hahahah merci monsieur @CarlosCalla
- Tous les crédits vont à que les gars de l'OMI : Tamás Pap
- mais que faire si nous utilisons l'image d'arrière-plan dans la zone de saisie? Je l'ai essayé sur d'entrée avec une image d'arrière-plan et ce son échec.
- oui @Gajen il ne fonctionnera pas sur l'image de fond, mais en aucune façon sa recommandé maintenant à utiliser les css de couleurs à l'aide des images.
- Presque en 2015 et cette solution est toujours en cours forte. Juste sauvé ma bacon, ici, ont un upvote genre sir.
- merci pour votre vote sir 🙂
- Tellement en colère que chrome n'a ce
- Est-il un moyen de changer la couleur de la police? Nous avons gris des zones de saisie de texte blanc. Chrome change le texte en noir ... ce qui est un peu difficile à lire sur le gris. Merci!
- que faire si le fond doit être transparent/inhérente
- Cela fonctionne maintenant avec la dernière version de google chrome? Ne fonctionne pas pour moi..
- la nuance jaune apparaît encore alors que le menu est ouvert. comment puis-je le supprimer?
- Comment le rendre transparent
- Excellente solution! @RizwanMumtaz vous pouvez définir la couleur RVB.. par exemple: -webkit-box-shadow: 0 0 0px 1000px rgba(0, 128, 255, 0.2) inset;
- J'ai une question pour vous, comment vous obtenez cette solution?
- Merci beaucoup pour cette. Les navigateurs ne devraient pas faire ce genre de décisions de conception pour nous.
- bon point! J'aime la Force Brute
- ne fonctionne pas (je suis sur la Version 51.0.2704.103 m (64-bit))
- Fonctionne pour moi sur Chrome 51.0.2704.106 / OSX 10.11.5.
- Si vous avez besoin d'une solution qui fonctionne avec de la transparence alors commander ma réponse.
- J'ai mis une image comme arrière-plan du champ de saisie, cette solution supprime le jaune de l'ombre, mais l'image de fond est toujours caché
- Pouvez-vous essayer de Steve solution ?! stackoverflow.com/a/37432260/427622
- Cette approche ne fonctionne pas sur Chrome sous iOS pour une raison...Fonctionne parfaitement pour Chrome sur le bureau et Android. Des idées?
- -webkit-box-shadow: 0 0 0px 1000px white inset; n'a pas fonctionné pour moi, il serait encore changer bg de couleur jaune lorsque j'ai cliqué sur l'entrée. J'ai ajouté !important et maintenant ça fonctionne.
- Pour le paramètre transparent, quelqu'un a déjà essayé rgba(0, 0, 0, 0)?
- Merci, fonctionne parfaitement. Il semble y avoir un bug dans Chrome, comme le réglage de l'arrière-plan lui-même remplace la valeur par défaut d'uc de la feuille de style dans les outils de dev, mais le résultat d'un calcul de style est toujours aussi moche jaune.
- L'astuce fonctionne toujours, aussi actuel de chrome, en Mai 2017. — Méfiez-vous cependant, qu'un trop grand rayon de flou peut ralentir les plus faibles des appareils mobiles. Blanc-remplir un champ de saisie de 20px de hauteur, un rayon de 30px est tout à fait suffisante (déjà avec une certaine sécurité supplémentaire.) Et: 0 jamais besoin d'une unité, d'ailleurs pas pour px. → 0 0 0 30px white inset
- merci pour ces infos n'hésitez pas à modifier la réponse 😉
- Frank a sous 2K de sorte que leur édition a dû venir par le biais de l'examen de la file d'attente. Il avait déjà à rejeter le vote par le temps que je l'ai vu. Il serait mieux pour vous de modifier votre réponse vous-même lorsque vous souhaitez intégrer de nouveaux contenus en provenance des utilisateurs sous 2K, de sorte qu'il ne soit pas rejeté comme une "tentative de réponse". (J'ai expliqué ce qui s'est passé dans l'historique d'édition.)
- pour Bootstrap (v3) vous pouvez utiliser cette règle pour garder l'encart que bootstrap ajoute. retrait de la transition s'arrête le clignotement étrangeté qui se produit. input:-webkit-autofill { -webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 0 100px white inset!important; -webkit-transition:none; }
- -webkit-box-shadow pour -webkit-autofill ne semble pas s'appliquer pour moi que de Chrome 63 (janvier 2018), -webkit-text-fill-color et transition fonctionne très bien. Quelqu'un d'autre peut confirmer?
- Pouvons confirmer. Lors de l'inspection de l' -webkit-box-shadow propriété chrome donne aussi une "valeur de propriété non Valide" erreur
- A travaillé comme un charme, merci.
- En outre, si vous souhaitez définir le signe du curseur ou de la couleur: input:-webkit-autofill { caret-color: white; }
- et à l'aide de jquery ... $(this).css("-webkit-box-shadow","0 0 0 30px rouge encart");
- nice, il a travaillé pour moi..
- Pourquoi ne pas en arrière-plan-couleur: blanc travail?
- j'ai dû ajouter !important; pour le premier exemple de code. Mais je vous remercie!
- Modifié pour inclure !important, belle réponse et merci monsieur!
- Pourquoi devons-nous utiliser la boîte de l'ombre au lieu de la couleur d'arrière-plan?
- c'est juste une solution de contournement pour couvrir la couleur d'arrière-plan parce que google chrome a refusé de changer la couleur d'arrière-plan
- Merci @FareedAlnamrouti. Je me demandais cela parce que, à l'aide d'une ombre avec une couleur transparente à la place d'une couleur d'arrière-plan laisse la valeur par défaut de couleur jaune dans le fond et c'était un peu frustrant...
- Dans google Chrome, maintenant, l'utilisateur de l'agent de la feuille de style montre :-internal-autofill-previewed et :-internal-autofill-selected pseudoclasses au lieu de -webkit-autofill... Mystérieusement cependant, -webkit-autofill fonctionne toujours. Personnellement, je n'ai pas besoin de la !important.
InformationsquelleAutor Fareed Alnamrouti
262

Les solutions précédentes de l'ajout d'un box-shadow fonctionne bien pour les gens qui ont besoin d'un solide de couleur d'arrière-plan. L'autre solution de l'ajout d'une transition œuvres, mais d'avoir à définir une durée/délai signifie que, à un certain point, il peut montrer de nouveau.

Ma solution est d'utiliser les images clés au lieu de cela, de cette façon, il sera toujours montrer les couleurs de votre choix.
```
@-webkit-keyframes autofill {
    to {
        color: #666;
        background: transparent;
    }
}

input:-webkit-autofill {
    -webkit-animation-name: autofill;
    -webkit-animation-fill-mode: both;
}
```
Exemple Codepen: https://codepen.io/-Steve-/pen/dwgxPB
- C'est beaucoup plus idéal sur les autres solutions car cela permet de réelle transparence, ma boîte est transparente qui laisse passer certains de l'arrière-plan, j'ai donc besoin d'entrées pour être 100% transparent. Beau travail de Steve!
- Génial... le seul qui fonctionne pour un fond transparent!
- une autre excellente solution
- Vu des dizaines de réponses,c'est le meilleur,upvoted bon travail !
- Ce doit être la accepté de répondre à . Upvoted sir!
- C'était vraiment utile. Merci!
- Vous êtes un sauveteur!
- Ceci a travaillé tout simplement parfait. Merci beaucoup
- Meilleure solution que toute solution autre. Mais pour moi, j'ai besoin de input {...} au lieu de input:-webkit-autofill {...} pour qu'il fonctionne parfaitement.
- Cela fonctionne comme un charme. Pour moi, la accepté de répondre ne fonctionne pas.
- Il est intéressant de noter qu'il n'accepte pas la couleur hex codes à 6 chiffres, seulement 3. Avec trois, vous devez utiliser !important.
- Toutefois, cela ne fonctionne pas si vous souhaitez définir une image d'arrière-plan au lieu de la couleur d'arrière-plan.
- Je n'ai pas essayé cela, mais vous pourriez essayer de définir l'image de fond et de changer l'image clé pour la couleur d'arrière-plan à la place. Si cela ne fonctionne pas, alors vous pourriez avoir à envelopper l'élément et de définir l'arrière-plan sur un autre élément qui doit vous montrer maintenant l'entrée est transparent.
- Yep, c'est ce que je suis en train d'essayer de faire. Un peu bizarre, comme je l'avais espérer que cela permet de mettre des images de fond, en raison de -webkit-appearance: none.
- Génial solution étonnante. m'a aidé 🙂
- Encore une solution parfaite, merci ! Upvoted 😀
- Avec d'autres solutions, j'ai un petit problème : lors de la PREMIÈRE clavier frappe sur une seringue de terrain, l'arrière-plan jaune revenir pendant quelques ms (un clin d'œil de jaune). Cette réponse est la seule suppression de ce problème. super !
- la couleur doit être hériter pour permettre les changements de couleur de l'extérieur
- que serait dépend de ce que les gens cherchent à obtenir. Ma solution est juste un exemple et si il doit hériter de la couleur, alors oui il se doit, mais pour les entrées, ce n'est pas souvent le cas.
- Cela fonctionne parfaitement, même si vous chargez la page il n'y a aucun signe de fond jaune.
- C'est la seule solution qui a fonctionné pour moi! Merci beaucoup!
- greaaaaaaaaaaaaaaaaaaaaaaaaaaaaaat
- J'ai dû enlever le "webkit"-le préfixe de webkit-keyframes, -webkit-animation-name et -webkit-animation-fill pour obtenir que cela fonctionne. Mais après qu'il a parfaitement fonctionné!
- c'est bizarre, le navigateur et la version utilisez-vous? Je viens de vérifier le dernier Chrome et le préfixe des images clés encore du travail pour moi...
- La meilleure solution pour moi! Plus facile que les autres.
- La solution parfaite!
- Si c'est toujours travailler dans la version actuelle de Chrome, quelqu'un peut s'il vous plaît poster un Codepen? J'ai essayé pendant une heure pour faire ce travail.
- désolé je ne viens de voir cela, j'ai ajouté un codepen à la réponse: codepen.io/-Steve-/stylo/dwgxPB
- Merci Steve, je n'ai aucune idée de comment j'ai été difficile. 🙂
- Excellent travail. Je pense encore mieux est d'utiliser to { color: inherit, background: inherit }
- C'est très bien si vous voulez hériter de la couleur. Mais il est intéressant de mentionner qu'il héritera de la des couleurs à partir des entrées parent et non pas à partir de votre entrée elle-même. Généralement ce n'est pas ce que vous souhaitez. Et si c'est ce que tu voulais, alors vous serait peut-être encore mieux avec un fond transparent.
- C'est une excellente réponse pour la transparence! Merci!
InformationsquelleAutor Steve
251

J'ai une meilleure solution.

Réglage de l'arrière-plan d'une autre couleur comme ci-dessous ne permettent pas de résoudre le problème pour moi parce que j'avais besoin d'un transparent champ de saisie
```
-webkit-box-shadow: 0 0 0px 1000px white inset;
```
J'ai donc essayé d'autres choses et j'ai trouvé ceci:
```
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    transition: background-color 5000s ease-in-out 0s;
}
```
- Ce n'est pas transparent pour moi 🙁
- Qui fonctionne pour moi. Merci 🙂
- Cela fonctionne vraiment, la saisie semi-automatique fonctionne normalement. Merci!
- Vous êtes un génie 🙂
- Yay - plus de clignotant hover! +1
- Génial, j'ai aussi besoin d'un arrière-plan transparent. PS: n'oubliez pas le -webkit-text-fill-color: yellow !important; pour la couleur du texte.
- Ce sera encore le remplissage automatique de fond lorsque l'entrée a été caché/montré avec display. Violon - Check it out
- Des œuvres. Check it out ici
- Vous êtes génial, cela fonctionne parfaitement
- Au lieu de définir la transition-duration ridiculement élevé, il est préférable de définir la transition-delay à la place. De cette façon, vous réduire encore la possibilité de tout changement dans les couleurs.
- Le transition hack fonctionne uniquement si l'entrée n'est pas auto-rempli avec une entrée par défaut enregistrés par le navigateur, sinon le fond jaune) sera toujours là.
- Excellente solution.... mais pourquoi ce travail? Et pourquoi ne la définition de background-color pas de travail? Chrome doit corriger cela!!
- J'ai mis une image comme arrière-plan du champ de saisie, cette solution supprime le jaune de l'ombre, mais l'image de fond est toujours caché
- Ceci a travaillé pour moi pendant que l'autre ne le fait pas... Pour un fond blanc.
- Cela fonctionne pour moi avec la version actuelle de Chrome (55.0.2883.87 m (64-bit)). Mais j'ai besoin d'ajouter le support pour le contrôle de sélection pour une meilleure couverture. Malheureusement, cela casse la compilation de MOINS de fichiers, donc j'ai dû ajouter séparément sur la page et éventuellement l'inclure dans la Page principale (asp.net).
- Cela fonctionne... pour environ 5000 secondes... 😀
- Ne fonctionne pas correctement si vous utilisez WCAG2.0. Changement d'arrière-plan sur :l'accent sera déformée. Est-il une autre solution? La saisie semi-automatique comportement est gênant dans le Cr.
- travail parfait! Merci
- Utilisation: input:-webkit-autofill { transition: all 0s 50000s; } de reporter tous les changements de style de
InformationsquelleAutor Nathan White
53

C'est ma solution, j'ai utilisé de la transition et de la transition de retard donc je peux avoir un fond 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;
}
```
- Travaillé avec du charme!
- Très sympa! merci
- Je upvoted pour la créativité en plus je peux confirmer que cela fonctionne comme prévu.
- Excellent billet, Merci!
- J'ai mis une image comme arrière-plan du champ de saisie, cette solution supprime le jaune de l'ombre, mais l'image de fond est toujours caché
- La meilleure solution jusqu'à présent, fonctionne très bien avec l'existant box-shadow pour la validation
- chrome a dit "color 9999s ease-out, background-color 9999s ease-out"; n'est pas valide exprssion. J'ai utilisé le code, -webkit-transition: background-color 9999s ease-out; et -webkit-text-fill-color: #fff !important;
InformationsquelleAutor Gísli Freyr Svavarsson
47

Ce qui a été conçu depuis ce coloris comportement a été de WebKit. Il permet à l'utilisateur de comprendre les données ont été pré-rempli. Bug 1334

Vous pourriez désactiver la saisie semi-automatique en train de faire (ou sur la forme spécifique de contrôle:
```
<form autocomplete="off">
...
</form
```
Ou vous pouvez changer la couleur de remplissage automatique par:
```
input:-webkit-autofill {
    color: #2a2a2a !important;
}
```
Remarque, il y a un bug en cours de suivi pour que cela fonctionne de nouveau: http://code.google.com/p/chromium/issues/detail?id=46543

C'est un WebKit comportement.
- merci mais que webkit règle CSS ne fonctionne pas. L'agent de l'utilisateur de la feuille de style est toujours à prendre en compte la couleur d'arrière-plan, même avec elle (un) définie pour !important et (b) ciblée avec un ID pour une plus grande spécificité. Il ressemble à Chrome va toujours pour le remplacer. Suppression de la saisie semi-automatique n'a l'air de fonctionner, mais c'est vraiment pas ce que je veux faire.
- Certaines personnes ont le même problème, avez-vous vérifier le bug post? code.google.com/p/chromium/issues/detail?id=1334
- Chrome bloque les CSS tente de remplacer que la couleur jaune. Réglage autocomplete="off" va certainement soulever des questions d'accessibilité. Pourquoi est-ce une réponse comme correcte de toute façon?
- C'est un Chrome bug, code.google.com/p/chromium/issues/detail?id=46543
- C'est une bonne solution, mais si vous êtes à l'aide de Réagir, il va se plaindre que la saisie semi-automatique est un inconnu de la propriété DOM. Donc, c'est en fait la saisie semi-automatique (note camelcase).
- Désactiver la saisie semi-automatique est un hack n'est pas une solution
InformationsquelleAutor Mohamed Mansour

Une solution possible pour le moment est de définir une "forte" à l'intérieur de l'ombre:

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;
}

C'est la solution qui est en fait de travail, nous ne voulons pas ignorer l'arrière-plan jaune seulement quelques fois, comme la accepté de répondre en conséquence.

InformationsquelleAutor Tamás Pap

essayez ceci pour masquer la saisie automatique de style

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;
    }

Fonctionne comme un charme, +1
pour les curieux, couleur d'arrière-plan n'a pas d'effet. L'-webkit-box-shadow est le bit intelligente qui l'emporte sur le fond jaune de Chrome

InformationsquelleAutor Francisco Costa

18

Toutes les réponses ci-dessus, a travaillé mais n'ont leurs défauts. Le code ci-dessous est issu de la fusion de deux des réponses ci-dessus, qui fonctionne parfaitement avec aucun clignotement.
```
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;
}
```
- Il travaille sans clignotant.
- J'ai mis une image comme arrière-plan du champ de saisie, cette solution supprime le jaune de l'ombre, mais l'image de fond est toujours caché
InformationsquelleAutor Jack Russell
15

SASS
```
input:-webkit-autofill

  &,
  &:hover,
  &:focus,
  &:active
    transition-delay: 9999s
    transition-property: background-color, color
```
- En fait, cela a fonctionné pour moi depuis la accepté de répondre clignote d'une couleur jaune pâle.
InformationsquelleAutor Patrick Fisher
14

Après 2 heures de recherche, il semble encore google remplace la couleur jaune, mais j'ai la solution pour elle. C'est le droit. il va travailler pour le hover, focus, etc ainsi. tout ce que vous avez à faire est d'ajouter !important pour elle.
```
 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 permettra de supprimer complètement jaune à partir de champs de saisie
- Cette application fonctionne
- il fonctionne uniquement pour les entrées blanc
InformationsquelleAutor don
8

Si vous souhaitez conserver la fonctionnalité de saisie semi-automatique intact, vous pouvez utiliser un peu de jQuery pour supprimer de google Chrome style. J'ai écrit un 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);
    });
});}
```
- Cela semble être la meilleure solution, bien que, il bloque Kicksend de mailcheck. Toutes les idées sur la façon de travailler autour d'?
- Voici ce que je suis en utilisant, btw.
- Ce n'est pas une bonne solution depuis google chrome mot de passe de l'auto complète des arrêts de travail. C'est d'abord de remplir le nom et Google chrome auto remplit le mot de passe. Cependant, une fois le javascript ci-dessus s'exécute, le nom est supprimé et mis à nouveau, et l'auto-rempli mot de passe est perdu
InformationsquelleAutor Benjamin
8

En plus de cela:
```
input:-webkit-autofill{
-webkit-box-shadow: 0 0 0px 1000px white inset;
}
```
Vous pouvez également ajouter des
```
input:-webkit-autofill:focus{
-webkit-box-shadow: 0 0 0px 1000px white inset, 0 0 8px rgba(82, 168, 236, 0.6);
}
```
D'autres sages, lorsque vous cliquez sur l'entrée, la couleur jaune va revenir.
Pour le focus, si vous êtes en utilisant bootstrap, la deuxième partie est de la frontière, en soulignant 0 0 8px rgba(82, 168, 236, 0.6);

Tel qu'il vient de ressembler à tout le bootstrap d'entrée.

InformationsquelleAutor Linghua Jin
8

J'ai eu un problème où je ne pouvais pas utiliser box-shadow parce que j'avais besoin de le champ de saisie à être transparent. C'est un peu un hack mais pur CSS. Définir la transition vers une très longue période de temps.
```
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;
}
```
- Dès maintenant dans le dernier Chrome 50.x.x, IL fonctionne parfaitement bien. Merci beaucoup!
- Au lieu de définir la transition-duration ridiculement élevé, il est préférable de définir la transition-delay à la place. De cette façon, vous réduire encore la possibilité de tout changement dans les couleurs.
- merci, j'ai juste mis un retard. Beaucoup plus agréable.
InformationsquelleAutor Alex

Essayez ceci:
Même chose que @Nathan-blanc réponse ci-dessus, avec des modifications mineures.

/* 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;
}

Wow merci! Qui na pas gâcher color prop!
C'est la meilleure réponse après avoir essayé toutes les réponses.

InformationsquelleAutor Surender Lohia

6

J'ai développé une autre solution à l'aide de JavaScript sans JQuery. Si vous trouvez cela utile ou décider de re-poster ma solution, je vous demande seulement inclure mon nom. Profitez de. – 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 Webkit de style dès que le texte additionnel est entré. Il suffit de changer le champ de saisie de la valeur ne suffit pas, Chrome veut un événement. En se concentrant sur chaque champ de saisie (texte, mot de passe), nous pouvons envoyer un événement de clavier (la lettre "a"), puis définissez la valeur de texte à son état précédent (l'auto-texte rempli). Gardez à l'esprit que ce code sera exécuté dans tous les navigateurs et vérifiera chaque champ de saisie dans la page web, de l'ajuster en fonction de vos besoins.
- Ne semble pas fonctionner pour moi.
- Woah qui a fait le tour. enfin une vraie solution. bien fait
- eh bien, il a travaillé pour la plupart.. il efface mon mot de passe malheureusement. Essayer de l'obtenir pour enregistrer le mot de passe de la première et de le remettre après les boucles for, mais chrome semble avoir quelques problèmes avec ça. mmmm
InformationsquelleAutor Daniel Fairweather
6

L'ajout d'une heure de retard pause css changements sur l'élément d'entrée.

C'est plus mieux plutôt que d'ajouter de la transition de l'animation ou de l'intérieur de l'ombre.
```
input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill{
  transition-delay: 3600s;
}
```
InformationsquelleAutor StefansArya

Pour ceux qui sont à l'aide de la Boussole:

@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);
            }
        }
    }
}

Mais transparent?

InformationsquelleAutor jedmao

4

J'ai un pur CSS solution qui utilise les Filtres CSS.
```
filter: grayscale(100%) brightness(110%);
```
Les niveaux de gris filtre remplace le jaune à gris, puis la luminosité supprime le gris.

VOIR CODEPEN

InformationsquelleAutor 2ne
3

J'abandonne!

Car il n'y a aucun moyen de changer la couleur de la saisie avec saisie semi-automatique j'ai décider de désactiver tous les d'eux avec jQuery pour les navigateurs webkit. Comme ceci:
```
if (/webkit/.test(navigator.userAgent.toLowerCase())) {
    $('[autocomplete="on"]').each(function() {
        $(this).attr('autocomplete', 'off');
    });
}
```
InformationsquelleAutor ed1nh0
3

J'ai une solution si vous souhaitez empêcher le remplissage automatique de google chrome mais c'est un peu "machette" , il suffit de retirer la classe que google chrome ajoute à ces entrées de champs et de définir la valeur "" si vous n'avez pas besoin de montrer stocker des données après la charge.
```
$(document).ready(function () {
    setTimeout(function () {
            var data = $("input:-webkit-autofill");
            data.each(function (i,obj) {
            $(obj).removeClass("input:-webkit-autofill");
                    obj.value = "";
            });
    },1);           
});
```
InformationsquelleAutor Nicolas Arias

La solution de Daniel Fairweather (Suppression de l'entrée de la couleur de fond pour Chrome saisie semi-automatique?) (j'aimerais upvote sa solution, mais encore besoin de 15 rep) fonctionne vraiment bien. Il y a vraiment une énorme différence avec la plupart des upvoted solution : vous pouvez garder des images de fond ! Mais un peu de modification (juste Chrome vérifier)

Et que vous devez garder à l'esprit, il fonctionne UNIQUEMENT visible sur le champs !

De sorte que vous si vous êtes en utilisant $.show() pour votre formulaire, vous devez exécuter ce code Après le show() événement

Ma complète de la solution (j'ai un afficher/masquer les boutons de 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 une fois, je préfère que ce soit un commentaire.

Si vous le souhaitez, je peux mettre un lien vers le site où je l'ai utilisé.

InformationsquelleAutor Jurion

Merci Benjamin!

La Mootools solution est un peu plus compliqué, car je ne peux pas obtenir des champs à l'aide d' $('input:-webkit-autofill'), Donc ce que j'ai utilisé est le suivant:

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
}

InformationsquelleAutor andi

2

Aucune des solutions n'a fonctionné pour moi, le médaillon de l'ombre ne fonctionne pas pour moi, car les entrées ont un translucide arrière-plan incrusté sur le fond de la page.

Alors je me suis demandé, "Comment est-Chrome déterminer ce qui devrait être remplis automatiquement sur une page donnée?"

"Est-il pour l'entrée id, noms d'entrée? La forme id? Forme d'action?"

Par le biais de mon expérimentation avec le nom d'utilisateur et le mot de passe entrées, il n'y avait que deux façons j'ai trouvé que serait la cause de google Chrome pour ne pas être en mesure de trouver les champs doivent être remplis automatiquement:

1) Mettre le mot de passe d'entrée à l'avance de la saisie de texte. 2) leur Donner le même nom et l'id ... ou pas de nom et id.

Après le chargement de la page, avec javascript, vous pouvez soit modifier dynamiquement l'ordre des entrées sur la page, ou de manière dynamique leur donner leur nom et l'id ...

Et Chrome ne sais pas ce qui a frappé ... la saisie semi-automatique est cassé!

Fou hack, je sais. Mais il travaille pour moi.

Chrome 34.0.1847.116, OSX 10.7.5

InformationsquelleAutor i_a
2

Malheureusement strictement aucune des deux solutions n'a fonctionné pour moi en 2016 (quelques années après la question)

Alors, voici la solution agressive 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 tout en économisant de la valeur, et recrée, puis remet la valeur.
- La solution par fareed namrouti fonctionne très bien pour moi sur Chrome 51.0.2704.106 / OSX 10.11.5.
- Checkout ma solution, il travaille dans la transparence
InformationsquelleAutor FlorianB

Cela fonctionnera pour les input, textarea et select dans des conditions normales, hover, l'accent et les états actifs.

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;
}

Ici est SCSS version 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;
    }
}

InformationsquelleAutor Waqas Anwar

Comme mentionné avant, encart-webkit-box-shadow pour moi fonctionne le mieux.

/* Code witch overwrites input background-color */
input:-webkit-autofill {
     -webkit-box-shadow: 0 0 0px 1000px #fbfbfb inset;
}

Également extrait de code pour changer la couleur du texte:

input:-webkit-autofill:first-line {
     color: #797979;
}

InformationsquelleAutor Giedrius Vičkus

1

Cela a fonctionné pour moi:
```
padding: 5px;
background-clip: content-box;
```
InformationsquelleAutor arczi

C'est la solution complexe pour cette tâche.

JS:

(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)

CSS:

*:-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;
}

HTML:

<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"/>

InformationsquelleAutor BigClap

0

Simple, il suffit d'ajouter,
```
    autocomplete="new-password"
```
pour le champ mot de passe.
- Pour la construction d'une invite d'ouverture de session sur les Canaries v6 ajouter cet attribut pour seulement le champ mot de passe désactivée nom d'utilisateur et mot de passe. Minime, je l'aime. Merci!
- cette désactivé la fonction remplissage automatique complètement
InformationsquelleAutor Joakim Krassman

Google Chrome agent utilisateur empêcher les développeurs CSS, Donc pour changer autofill de l'INTERFACE utilisateur doit utiliser une autre propriété comme celles-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*/
}

InformationsquelleAutor AmerllicA

0

Cela fonctionne pour moi.

.input:-webkit-autofill {transition: background-color 5000s ease-in-out 0s;}
- Mauvaise idée - regarder Google Chrome Helper manger votre CPU.
InformationsquelleAutor Kostya Harutyunyan

je l'utilise. le travail pour moi.
supprimer fond jaune de 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;
}

InformationsquelleAutor Ali Bagheri

0

Nous pouvons utiliser la -webkit-autofill pseudo-sélecteur de cibler les champs et le style comme bon nous semble. 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, comme à la frontière et une taille de police. On peut même changer la couleur du texte à l'aide de -webkit-text-fill-color qui est inclus dans l'extrait de code ci-dessous.

/* Changement de saisie semi-automatique des styles dans google 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;
}
```
InformationsquelleAutor Mohit Sharma

-1

l'utiliser et vérifiez votre problème problème est résolu

<input type="email" id="email" name="email" class="form-control validate" onfocus="this.removeAttribute('readonly');" readonly>

InformationsquelleAutor vinod joshi

-2

Il pourrait être un peu tard mais pour l'avenir référent, il y a un CSS SEULE solution que Olly Hodgons montre ici
http://lostmonocle.com/post/1479126030/fixing-the-chrome-autocomplete-background-colour

Tout ce que vous avez à faire est d'ajouter un sélecteur de remplacer la valeur par défaut des champs d'entrée de réglage
Donc, utiliser à la place de
```
input:-webkit-autofill {
    background-color: #FAFFBD !important;
}
```
Quelque chose comme
```
#login input:-webkit-autofill {
    background-color: #ff00ff;
}
```
ou
```
form input:-webkit-autofill {
    background-color: #f0f;
}
```
qui semble fonctionner très bien avec moi.
- Ne semble pas fonctionner dans les dernières Chrome (01/12/2012) : Version 23.0.1271.95 m
- Downvote raison: Ne fonctionne pas dans la dernière version de Chrome (01/04/2013)
- Alors que cela devrait fonctionner, malheureusement il ne fait pas =/
InformationsquelleAutor Novazembla
-2

résurrection de fil à deux ans plus tard. im travaillant autour de cette question sur les jours et j'ai trouvé un truc tout simple pour l'empêcher de cet horrible fonctionnalité saisie semi-automatique:

il suffit d'ajouter une chaîne aléatoire de la forme de la cible comme <form action="site.com/login.php?random=123213">

il fonctionne sur les dernières version de chrome 34.0.1847.137

mise à jour: si cela ne fonctionne pas, donnez étrange protocole à l'action comme <form id="test" action="xxx://"> et de remplir plus tard avec du javascript:
```
$('#test').attr('action', 'http://example.site/login.php');
```
mise à jour 2: toujours des problèmes avec cela, j'ai décidé de supprimer complètement le <form> tag et les variables post via jquery. son plus facile.
- Pourquoi voulez-vous briser ces habitudes des utilisateurs demander de plus? Si vous pensez que c'est laid, vous devriez plutôt faire paraître plus jolie. Arrêter de briser les habitudes que les gens peuvent trouver utile, simplement parce que vous avez personnellement n'aime pas.
- voulais juste mettre en évidence, la réponse a été envoyé il y a une décennie. chrome & chrome développeurs résolu le problème aujourd'hui.
InformationsquelleAutor Psy Chip

Vous devez vous connecter pour publier un commentaire.