web-dev-qa-db-fra.com

Comment puis-je arrêter Chrome de jaunir les zones de saisie de mon site?

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 nécessitant une attention particulière.

Sur Chrome (et pour les utilisateurs de la barre d’outils Google), la fonctionnalité de saisie automatique re-colorie mes formulaires de saisie en jaune. Voici la question complexe: je souhaite que la saisie automatique soit autorisée sur mes formulaires, car elle permet aux utilisateurs d’accéder plus rapidement à la saisie. Je me connecte. Je vais vérifier la possibilité de désactiver l’attribut autocomplete si une erreur est déclenchée, mais il s’agit d’un codage complexe qui permet de désactiver par programmation l’achèvement automatique de la seule entrée affectée sur une page. Ceci, pour le dire simplement, serait un mal de tête majeur.

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

[edit] 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'y a pas d'autre moyen que d'utiliser l'attribut autocomplete (qui semble fonctionner).

cssvalidationgoogle-chromehtml-input
151
Dave Rutledge

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.

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

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

... ainsi que pour un formulaire complet

<form autocomplete="off" ...>
74
Ben Hoffstein

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 d’arrière-plan, cela peut être corrigé par quelque chose comme:

:focus { background-color: #fff; }
136
John Leidegren

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

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/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);
    });
});}
14
Benjamin

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 de votre choix:

.nohighlight:focus { outline:none; }

Vous pouvez bien sûr modifier la frontière comme vous le souhaitez:

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

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

7
Kita

Oui, ce serait un mal de tête majeur qui, à mon avis, ne vaut pas le retour. Peut-être que vous pourriez 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 placer une petite bande rouge à côté (comme le gmails "Loading" tape) qui s’efface lorsque la boîte est insérée. concentrer.

2
Mostlyharmless

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

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.

1
hohner

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

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 n'importe qui !!

1
321X

Cela marche. 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 tweak 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 des 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);
        });
    });
};
1
Vin

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

<input readonly="readonly" onfocus="this.removeAttribute('readonly');" />
1
hsobhy
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 inclure ceci dans votre CSS pour textareas:

textarea:focus { outline:none; }

Cela peut sembler évident pour la plupart des gens, mais pour les débutants, vous pouvez également définir une couleur comme telle:

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