Désactiver la mise en évidence du contour orange lors de la mise au point

Question

Je suis en train de coder une application utilisant jQuery, jqTouch et phonegap et j'ai rencontré un problème persistant qui survient lorsqu'un utilisateur soumet un formulaire en utilisant le bouton "Go" du clavier souple.

Bien qu'il soit facile de faire en sorte que le curseur se déplace vers l'élément de saisie du formulaire approprié en utilisant la fonction $('#input_element_id').focus() la mise en évidence du contour orange revient toujours au dernier élément de saisie du formulaire. (La surbrillance ne s'affiche pas lorsque le formulaire est soumis à l'aide du bouton d'envoi du formulaire).

Ce dont j'ai besoin, c'est de trouver un moyen soit de désactiver complètement la surbrillance orange, soit de la faire se déplacer vers le même élément d'entrée que le curseur.

Jusqu'à présent, j'ai essayé d'ajouter les éléments suivants à mon CSS :

.class_id:focus {
    outline: none;
}

Cela fonctionne dans Chrome mais pas sur l'émulateur ou sur mon téléphone. J'ai également essayé de modifier le fichier jqTouch theme.css à lire :

ul li input[type="text"] {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0); and
    -webkit-focus-ring-color:  rgba(0, 0, 0, 0);
}

Sans aucun effet. J'ai également essayé chacun des ajouts suivants à la page AndroidManifest.xml archivo:

android:imeOptions="actionNone"
android:imeOptions="actionSend|flagNoEnterAction"
android:imeOptions="actionGo|flagNoEnterAction"

Aucun d'entre eux n'a d'effet.

Mise à jour : J'ai fait un peu plus de dépannage avec ceci et à ce jour j'ai trouvé :

1. La propriété outline ne fonctionne que sur Chrome, pas sur le navigateur Android.

2. Le site -webkit-tap-highlight-color La propriété fonctionne en fait sur le navigateur Android, mais pas sur Chrome. Elle désactive la mise en évidence au moment de la mise au point ainsi qu'au moment du tapotement.

3. Le site -webkit-focus-ring-color ne semble pas fonctionner sur les deux navigateurs.

Answer 1

Essayez :

-webkit-tap-highlight-color: rgba(255, 255, 255, 0); 
-webkit-tap-highlight-color: transparent;  // i.e. Nexus5/Chrome and Kindle Fire HD 7''

Answer 2

Fonctionne sur Android Default, Android Chrome et iOS Safari à 100%.

* {
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0) !important; 
    -webkit-focus-ring-color: rgba(255, 255, 255, 0) !important; 
    outline: none !important;
}

Answer 3

* {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);  
} 

dans votre fichier css. Cela a fonctionné pour moi !

Answer 4

Suppression de la boîte orange sur le focus de la saisie pour les Androïdes

textarea:focus, input:focus{
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0);    
    -webkit-user-modify: read-write-plaintext-only;
}

tap-highlight-color pour la plupart des versions

utilisateur-modifier pour 4.0.4

Answer 5

Essayer pour la ligne de mise au point

body, textarea:focus, input:focus{
    outline: none;
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
}