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

Question

Parmi les autres textes, 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 serait de travailler pour cela.

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

Answer 1

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

 :focus { background-color: #fff; }
 

Answer 2

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 (n’a pas été testé), vous pouvez définir cet attribut en cas d’erreur.

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

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

... ainsi que pour un formulaire entier

 <form autocomplete="off" ...>
 

Answer 3

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

Answer 4

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:

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

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

Answer 5

Oui, il serait un casse-tête, qui, à mon avis, n’est pas une valeur de retour. Peut-être que vous pourriez ajuster votre stratégie d’interface utilisateur un peu, et au lieu de la boîte de coloration rouge, vous pourriez les bordures de couleur rouge, ou mettre un petit ruban rouge à côté d’elle (comme le ruban de « Chargement » gmails) qui s’estompe lorsque la boîte est au point.