Comment puis-je empêcher Chrome de jaunir les zones de saisie de mon site?

Question

Parmi d'autres textes et supports visuels sur la soumission d'un formulaire, après validation, je colore mes zones de saisie en rouge pour indiquer la zone interactive qui nécessite une attention particulière.

Sous Chrome (et pour les utilisateurs de la barre d'outils Google), la fonction de remplissage automatique re-colorie les formulaires de saisie en jaune. Voici le problème complexe: je veux que la saisie automatique soit autorisée sur mes formulaires, car cela accélère la connexion des utilisateurs. Je vais vérifier si vous pouvez désactiver l'attribut autocomplete si / lorsqu'une erreur est déclenchée, mais c'est une tâche complexe. un peu de code pour désactiver par programmation l’achèvement automatique pour la seule entrée affectée sur une page. Ceci, pour le dire simplement, serait un mal de tête majeur.

Pour éviter ce problème, existe-t-il une méthode plus simple pour empêcher Chrome de re-colorier les zones de saisie?

[modifier] J'ai essayé la suggestion! importante ci-dessous et elle n'a eu aucun effet. Je n'ai pas encore vérifié la barre d'outils Google pour voir si l'attribut! Important fonctionnerait pour cela.

Autant que je sache, il n’ya pas d’autre moyen que d’utiliser l’attribut autocomplete (qui semble fonctionner).

Answer 1

Je sais que dans Firefox, vous pouvez utiliser l’attribut autocomplete = " off " désactiver la fonctionnalité de saisie semi-automatique. Si cela fonctionne dans Chrome (non testé), vous pouvez définir cet attribut en cas d'erreur.

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

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

... ainsi que pour un formulaire entier

<form autocomplete="off" ...>

Answer 2

Définissez la propriété de contour CSS sur none.

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

Dans les cas où le navigateur peut également ajouter une couleur de fond, cela peut être corrigé par quelque chose comme

:focus { background-color: #fff; }

Answer 3

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

Answer 4

En utilisant un peu de jQuery, vous pouvez supprimer le style de Chrome tout en conservant la fonctionnalité de saisie semi-automatique. J'ai écrit un court post à ce sujet ici: http://www.benjaminmiles.com/2010 / 11/22 / fixation-google-chromes-jaune-styles-a-complétion-automatique-avec-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);
    });
});}

Answer 5

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

*: focus {outline: none; }

Pour supprimer la bordure des champs sélectionnés, appliquez simplement cette classe aux champs de saisie souhaités:

.nohighlight: focus {outline: none; }

Vous pouvez bien sûr modifier la bordure à votre guise:

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

(De Bill Beckelman: Ignorer la bordure automatique de Chrome autour des champs actifs à l'aide de CSS )

Answer 6

Oui, ce serait un mal de tête majeur qui, à mon avis, ne vaut pas le retour. Vous pourriez peut-être modifier un peu votre stratégie d’interface utilisateur et au lieu de colorier la boîte en rouge, vous pouvez également colorer les bordures en rouge ou placer une petite bande rouge à côté (comme dans gmails "Chargement") qui disparaît progressivement en bref.

Answer 7

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, ajoutez un nom de classe pour un sélecteur.

Answer 8

La solution la plus simple à mon avis est la suivante:

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

2. Utilisez ce code:

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

Answer 9

Après avoir appliqué @Benjamin à sa solution, j'ai découvert que le fait d'appuyer sur le bouton de retour me mettrait toujours en surbrillance.

Ma solution en quelque sorte pour empêcher cette surbrillance jaune de revenir est d’appliquer le javascript jQuery suivant:

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

J'espère que ça aide quelqu'un!

Answer 10

Cela fonctionne. Mieux encore, vous pouvez utiliser les valeurs de rgba (le hack inséré dans Box-Shadow ne fonctionne pas avec rgba). Ceci est un léger ajustement de la réponse de @ Benjamin. J'utilise $ (document) .ready () au lieu de $ (window) .load (). Cela semble mieux fonctionner pour moi - maintenant, il y a beaucoup moins de FOUC. Je ne crois pas que l’utilisation de $ (document) .ready (). Présente des inconvénients.

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

Answer 11

pour les versions d’aujourd’hui, cela fonctionne également s’il est placé dans l’une des deux entrées de connexion. Corrigez également les problèmes liés à la version 40+ et à la fin de Firefox.

<input readonly="readonly" onfocus="this.removeAttribute('readonly');" />

Answer 12

input:focus { outline:none; }

Cela a très bien fonctionné pour moi, mais il est plus que probable que les choses resteront uniformes sur votre site si vous souhaitez également l'inclure dans votre CSS pour textareas:

textarea:focus { outline:none; }

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

input:focus { outline:#HEXCOD SOLID 2px ; }

Answer 13

Si je me souviens bien, une règle! importante dans la feuille de style pour la couleur d'arrière-plan des entrées remplacera la complétude automatique de la barre d'outils Google.