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

151

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

Dave Rutledge
la source
1
ce n'est pas seulement un problème dans Chrome. La barre d'outils Google pour les autres navigateurs fait le même "jaunissement" des champs de saisie.
Carlton Jenke
2
J'ai fourni une réponse pour vous qui fonctionne ci-dessous.
John Leidegren
8
Je ne comprends pas pourquoi tout le monde parle de contour: aucun, la question concerne le fond Yello, PAS le contour. Et l'attribut de saisie semi-automatique désactivé ne résoudra PAS le problème, car davebug a déclaré qu'il souhaitait que la saisie semi-automatique fonctionne, mais pas l'arrière-plan jaune.

Réponses:

74

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" ...>
Ben Hoffstein
la source
"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 peu complexe de codage pour désactiver par programme la saisie semi-automatique pour l'entrée unique effectuée sur une page."
Dave Rutledge
Hé ... oui, merci, même si je suppose que je dois encore m'enregistrer dans Chrome, non?
Dave Rutledge
2
pour les personnes utilisant des rails forme simple<%= simple_form_for @user, html: { autocomplete: 'off' } do |f| %>
carbonr
désolé de dire que cela ne m'a pas aidé
M.Islam
136

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; }
John Leidegren
la source
9
Contexte? Je ne savais pas que Chrome avait également ajouté une couleur d'arrière-plan? Si tel est le cas, cela peut être résolu par quelque chose comme:focus { background-color: #fff; }
John Leidegren
Tuer le contour avec CSS peut empêcher le jaunissement, mais cela n'empêchera pas le remplissage automatique réel. Si vous souhaitez faire cela, il est important d'utiliser l'attribut de saisie semi-automatique, non standard ou non.
Tom Boutell
2
@pestaa correct, ce n'est pas la bonne réponse, mais cela résout certainement un problème similaire
David Lawson
Faites attention lorsque vous traitez avec des tablettes et d'autres choses, le navigateur Android par défaut est un peu difficile à utiliser sans le contour. Assez facile à appliquer aux navigateurs non mobiles cependant :)
Tim Post
Une petite amélioration: input[type=text], input[type=password], input[type=email], textarea, select { outline: none; }
Felipe Lima
56

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;
}
JStormThaKid
la source
c'est un excellent hack. Merci
Jason
J'ajouterais de la concentration à cela aussi: Dinput:-webkit-autofill, input:focus:-webkit-autofill { -webkit-box-shadow: 0 0 0px 1000px #FFF inset; }
StephanieQ
salut @JStormThaKid, j'ai utilisé ceci ..., mais je n'ai pas fonctionné pour les entrées correctes ... veuillez répondre à ceci ...
mithu
Merci d'avoir répondu à la question qu'il a réellement posée! J'avais presque commencé à perdre espoir.
BVernon
Meilleure réponse ici, je voulais toujours la saisie semi-automatique de Google, alors merci
Spangle
14

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);
    });
});}
Benjamin
la source
Merci pour l'indice! Cependant, après avoir publié le formulaire, en cliquant sur le bouton de retour, la surbrillance jaune est revenue. J'ai étendu votre extrait (voir ma réponse) pour couvrir cela.
321X
+1 @Benjamin belle solution, ça clignote un peu le jaune mais ça corrige à la fin;)
itsme
7

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 )

Kita
la source
2

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.

La plupart du temps inoffensifs
la source
1

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.

Hohner
la source
1

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');
    };
    
Tim
la source
1

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

321X
la source
1

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);
        });
    });
};
Vin
la source
1

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');" />
hsobhy
la source
0
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 ; }
NewFangSol
la source
-1

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.

Quentin
la source