Comment puis-je arrêter de google Chrome à partir de jaunissement de mon site sur les zones de saisie?

Parmi d'autres du texte et des aides visuelles sur la soumission d'un formulaire, après validation, je suis la coloration de mes boîtes d'entrée rouge pour signifier l'espace interactif ayant besoin d'attention.

Sur Chrome (et pour la Barre d'outils Google utilisateurs) l'auto-fonction de remplissage re-couleurs de mon entrée formes de jaune. Voici la question complexe: je veux de l'auto-complétion autorisés sur mes formes, comme il accélère les utilisateurs se connectant. Je vais vérifier dans la capacité de transformer l'attribut autocomplete à off si/quand il ya une erreur est déclenchée, mais c'est un complexe de bits de codage de programmation pour désactiver l'auto-complétion pour le seul touché des commentaires sur une page. Ce, pour le dire simplement, serait l'un des principaux maux de tête.

Afin d'essayer d'éviter ce problème, est-il une méthode plus simple de l'arrêt de google Chrome à partir de la re-coloration à l'entrée des boîtes?

[edit] j'ai essayé le !important suggestion ci-dessous et il n'a eu aucun effet. Je n'ai pas encore vérifié la Barre d'outils Google pour voir si la !attribut important à travailler pour que.

Aussi loin que je peux dire, il n'y a pas d'autres moyens que d'utiliser l'attribut autocomplete (ce qui ne semble fonctionner).

  • ce n'est pas seulement un problème dans Chrome. La Barre d'outils Google pour les autres navigateurs ne le même "jaunissement" des champs de saisie.
  • J'ai fourni une réponse qui fonctionne ci-dessous.
  • Je ne comprends pas pourquoi tout le monde parle outline:none, la question est à propos de la yello fond, PAS le contour. Et l'attribut autocomplete réglé sur off ne résoudra PAS le problème, comme davebug dit qu'il veut la saisie semi-automatique de travailler, juste de ne pas l'arrière-plan jaune.
InformationsquelleAutor Dave Rutledge | 2008-10-06
  1. 74

    Je sais que dans Firefox, vous pouvez utiliser l'attribut autocomplete="off" pour désactiver la saisie semi-automatique. Si cela fonctionne dans Chrome (ne l'ai pas testé), vous pouvez définir cet attribut lorsqu'une erreur est rencontrée.

    Ceci peut être utilisé à la fois pour un seul élément

    <input type="text" name="name" autocomplete="off">

    ...ainsi que pour l'ensemble d'une forme

    <form autocomplete="off" ...>
    • "Je vais vérifier dans la capacité de transformer l'attribut autocomplete à off si/quand il ya une erreur est déclenchée, mais c'est un complexe de bits de codage de programmation pour désactiver l'auto-complétion pour le seul effectuée entrée sur une page."
    • Heh...oui, merci, mais je suppose que je n'ai encore besoin de vérifier dans Chrome, droit?
    • pour les personnes à l'aide de rails de forme simple <%= simple_form_for @user, html: { autocomplete: 'off' } do |f| %>
    • À compter de janvier 2017, cela ne semble pas fonctionner.
    • désolé de dire que cela ne m'aide pas
    InformationsquelleAutor Ben Hoffstein
  2. 136

    Définir le CSS contour de la propriété à aucun.

    input[type="text"], input[type="password"], textarea, select { 
    outline: none;
}

    Dans les cas où le navigateur peut ajouter une couleur d'arrière-plan ainsi ce peut être fixé par quelque chose comme 

    :focus { background-color: #fff; }
    • Cela ne fonctionne que pour la frontière, pas pour le fond.
    • Arrière-plan? Je n'étais pas au courant que google Chrome ajouté une couleur d'arrière-plan ainsi? Si oui, qui peut être fixé par quelque chose comme :focus { background-color: #fff; }
    • Tuer les contours de la CSS peut empêcher le jaunissement mais il n'est pas d'empêcher toute autofilling. Si vous voulez le faire, il est important d'utiliser l'attribut autocomplete, non standard ou non.
    • exact, ce n'est pas la bonne réponse, mais il a certainement résout un problème similaire
    • Prenez soin lorsque vous traitez avec les tablettes et les choses, le navigateur Android par défaut est un peu difficile à utiliser sans le contour. Assez facile à s'appliquer à des non-navigateurs mobiles bien 🙂
    • Une petite amélioration: input[type=text], input[type=password], input[type=email], textarea, select { outline: none; }
    • Remarque vous pouvez également modifier la couleur si vous voulez en définissant le contour de la couleur de la propriété dans votre css pour votre saisie semi-automatique, Chrome il a tout simplement un défaut.
    • Cela a fonctionné pour moi: :focus, :active { outline: none !important; }
    • S'il vous plaît ARRÊTER upvoting cette réponse, car il tout à fait ne PAS répondre à la question! La question était sur la saisie automatique, ne pas se concentrer!
    • Drôle hu? Comment un petit malentendu peut l'emporter sur la accepté de répondre, près de 3 pour 1. Ce ne serait pas l'adresse de l'auto-complète de la question, mais il n'aborder la question de la couleur qui est dans la question, à plusieurs reprises. Pas besoin d'être en colère, les gens de toute évidence trouvé ce utile la question est trompeuse.
    • "re-colorier les zones de saisie" en cas de "remplissage automatique", mais vous parlez de la couleur d'arrière-plan dans le cas de l'accent, ce qui est totalement différent. Désolé, mais vous n'êtes pas à répondre à la question, et il ne traite PAS de la question de l'appliqué couleur d'arrière-plan en cas de saisie semi-automatique, comme remplis automatiquement les boîtes ne sont pas nécessairement concentré en même temps! Et si des personnes sont amenées ici si vous essayez de changer quelque chose à propos de saisie semi-automatique, ils vont évidemment aussi rencontrer votre réponse est incorrecte, ce qui est contraire au but de stackoverflow, qui est en aidant les gens à résoudre les problèmes qu'ils ont.
    • Je pense que la communauté a parlé, clairement, sur le sujet. Beaucoup de gens sont en train de tromper (si vous disséquer la question et obtenir pointilleux à ce sujet), mais la réponse est toujours satisfaisant pour la plupart parce qu'il a (dans certains bizarre) capturé leur intention. C'est ce que les votes sont pour. Si ce en quelque sorte ne pas répondre à vos attentes chapeau est d'accord, mais je crois que vous appartenez à une minorité.
    • cela fonctionne pour moi en Chrome, comme de Décembre 2018

    InformationsquelleAutor John Leidegren
  3. 56

    c'est exactement ce que vous cherchez!

    //Just change "red" to any color
input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px red inset;
}
    • c'est un grand hack. Merci
    • Je voudrais mettre l'accent sur les trop 😀 input:-webkit-autofill, input:focus:-webkit-autofill { -webkit-box-shadow: 0 0 0px 1000px #FFF inset; }
    • salut @JStormThaKid, j'ai utilisé ce...,mais n'a pas de travail pour corriger les entrées... s'il vous plaît répondre à cette...
    • YYYYyyyyyesssssss.... :]
    • Merci de répondre à la question, effectivement, il l'a demandé! J'avais presque commencé à perdre espoir.
    • Doit avoir été accepté de répondre.
    • Meilleure réponse ici, je voulais encore google saisie semi-automatique, donc merci

    InformationsquelleAutor JStormThaKid
  4. 14

    En utilisant un peu de jQuery, vous pouvez supprimer de google Chrome style tout en gardant la fonctionnalité de saisie semi-automatique intacte. 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);
    });
});}
    • Merci pour l'astuce! Cependant, après la publication de la forme, en cliquant sur le bouton de retour, le jaune est revenu. Je l'ai étendu votre extrait de code (voir ma réponse) pour couvrir cette.
    • +1 @Benjamin solution sympa, il flashs peu le jaune, mais il corrige à la fin 😉
    InformationsquelleAutor Benjamin
  5. 7

    Pour supprimer la bordure pour tous les champs, vous pouvez utiliser les éléments suivants:

    *:focus { outline:none; }

    Pour supprimer la bordure pour sélectionner les champs il suffit d'appliquer cette classe pour les champs de saisie que vous souhaitez:

    .nohighlight:focus { outline:none; }

    Vous pouvez bien sûr modifier la frontière que vous le désirez ainsi:

    .changeborder:focus { outline:Blue Solid 4px; }

    (Du Projet De Loi Beckelman: Remplacer Chrome Automatique de la Frontière Autour des Champs à l'Aide de CSS)

    • *:focus { outline:none; } a fait le tour pour moi sur Chrome. +1
    • -1 question a été sur la saisie automatique, ne pas se concentrer
    InformationsquelleAutor Kita
  6. 2

    Oui, il serait l'un des principaux maux de tête, qui à mon avis n'est pas la peine de le retourner. Vous pourriez peut-être modifier votre INTERFACE utilisateur de stratégie un peu, et au lieu de la coloration de la zone rouge, vous pouvez couleur des bordures rouges, ou de mettre un petit ruban rouge à côté d'elle (comme la gmails "Chargement" de la bande) qui disparaît quand la boîte est au point.

    InformationsquelleAutor Mostlyharmless
  7. 1

    C'est un morceau de gâteau avec jQuery:

    if ($.browser.webkit) {
    $("input").attr('autocomplete','off');
}

    Ou si vous voulez être un peu plus sélectif, ajouter un nom de classe pour un sélecteur.

    InformationsquelleAutor hohner
  8. 1

    La manière la plus simple à mon avis est:

    1. Obtenir http://www.quirksmode.org/js/detect.html

    2. Utiliser ce code:

      if (BrowserDetect.browser == "Chrome") {
  jQuery('form').attr('autocomplete','off');
};
    InformationsquelleAutor Tim
  9. 1

    Après l'application @Benjamin et sa solution, j'ai découvert qu'en appuyant sur le bouton de retour serait encore me donner la couleur jaune.

    Ma solution en quelque sorte pour éviter ce jaune de revenir est le jQuery javascript:

    <script type="text/javascript">
    $(function() {
        if (navigator.userAgent.toLowerCase().indexOf("chrome") >= 0) {
        var intervalId = 0;
            $(window).load(function() {
                intervalId = setInterval(function () { //<< somehow  this does the trick!
                    if ($('input:-webkit-autofill').length > 0) {
                        clearInterval(intervalId);
                        $('input:-webkit-autofill').each(function () {
                            var text = $(this).val();
                            var name = $(this).attr('name');
                            $(this).after(this.outerHTML).remove();
                            $('input[name=' + name + ']').val(text);
                        });
                    }
                }, 1);
            });
        }
    });
</script>

    Espère que cela aide quelqu'un!!

    InformationsquelleAutor 321X
  10. 1

    Cela fonctionne. Le meilleur de tous, vous pouvez utiliser des valeurs rgba (le box-shadow encart hack ne fonctionne pas avec rgba). C'est une légère tweak de @Benjamin réponse. Je suis à l'aide de $(document).prêt() au lieu de $(window).load(). Il semble fonctionner mieux pour moi maintenant, il y a beaucoup moins de FOUC. Je ne crois pas qu'il y a et des inconvénients à l'utilisation de $(document).ready().

    if (navigator.userAgent.toLowerCase().indexOf("chrome") >= 0) {
    $(document).ready(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);
        });
    });
};
    InformationsquelleAutor Vin
  11. 1

    aujourd'hui, pour les des versions, Cela fonctionne aussi si placé dans l'une des deux la connexion des entrées. Fixer également la version 40+ et la fin de Firefox question.

    <input readonly="readonly" onfocus="this.removeAttribute('readonly');" />
    InformationsquelleAutor hsobhy
  12. 0
    input:focus { outline:none; }

    Qui a très bien fonctionné pour moi, mais plus que probablement à garder les choses uniforme sur votre site, vous allez voulez également inclure ceci dans votre CSS pour les textareas:

    textarea:focus { outline:none; }

    Aussi il peut sembler évident pour la plupart, mais pour les débutants, vous pouvez également définir une couleur en tant que telle:

    input:focus { outline:#HEXCOD SOLID 2px ; }
    InformationsquelleAutor NewFangSol
  13. -1

    Si je me souviens bien, une !règle importante dans la feuille de style pour la couleur de fond des entrées de remplacer la barre d'outils Google saisie semi-automatique - sans doute la même chose serait vraie de Chrome.

    InformationsquelleAutor Quentin