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

Entre autres textes et aides visuelles sur la soumission d'un formulaire, la post-validation, je colore mes boîtes de saisie en rouge pour indiquer la zone interactive nécessitant une attention.

Sur Chrome (et pour les utilisateurs de la barre d'outils Google), la fonction de remplissage automatique re-colore mes formulaires de saisie en jaune. Voici le problème complexe: je veux que la saisie semi-automatique soit autorisée sur mes formulaires, car elle accélère la connexion des utilisateurs. Je vais vérifier la possibilité de désactiver l'attribut de saisie semi-automatique si / quand une erreur est déclenchée, mais c'est un problème complexe peu de codage pour désactiver par programme l'auto-complétion pour la seule entrée affectée d'une page. Cela, pour le dire simplement, serait un casse-tête majeur.

Donc, pour essayer d'éviter ce problème, existe-t-il une méthode plus simple pour empêcher Chrome de recolorer les zones de saisie?

[modifier] J'ai essayé la suggestion! importante ci-dessous et cela 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.

Pour autant que je sache, il n'y a pas d'autre moyen que d'utiliser l'attribut autocomplete (qui semble fonctionner).

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

Cela peut être utilisé pour un seul élément

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

... ainsi que pour un formulaire entier

<form autocomplete="off" ...>

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

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

Dans les cas où le navigateur peut également ajouter une couleur d'arrière-plan, cela peut être corrigé par quelque chose comme

:focus { background-color: #fff; }

c'est exactement ce que vous recherchez!

// Just change "red" to any color
input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px red inset;
}

En utilisant un peu de jQuery, vous pouvez supprimer le style de Chrome tout en conservant la fonctionnalité de saisie semi-automatique intacte. J'ai écrit un court article à 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);
    });
});}

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 également modifier la bordure à votre guise:

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

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

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 colorer la boîte en rouge, vous pouvez colorer les bordures en rouge ou mettre un petit ruban rouge à côté (comme le ruban gmails "Chargement") qui disparaît lorsque la boîte est dans concentrer.

C'est un jeu d'enfant 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.

Le moyen le plus simple à mon avis est:

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

2. Utilisez ce code:

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

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

Ma solution en quelque sorte pour éviter ce point fort jaune de revenir est en appliquant 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 cela aide n'importe qui !!

Cela marche. Mieux encore, vous pouvez utiliser des valeurs rgba (le hack encadré box-shadow ne fonctionne pas avec rgba). Ceci est une légère modification 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 qu'il y ait et d'inconvénients à utiliser $ (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);
        });
    });
};

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

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

input:focus { outline:none; }

Cela a très bien fonctionné pour moi, mais plus que susceptible de garder les choses uniformes sur votre site, vous voudrez également l'inclure dans votre CSS pour les zones de texte:

textarea:focus { outline:none; }

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

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

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 saisie semi-automatique de la barre d'outils Google - probablement la même chose pour Chrome.