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


106

Je code une application à l'aide de jQuery, jqTouch et phonegap et j'ai rencontré un problème persistant qui survient lorsqu'un utilisateur soumet un formulaire à l'aide du bouton Go du clavier logiciel.

Bien qu'il soit facile de déplacer le curseur vers l'élément d'entrée de formulaire approprié à l'aide de $('#input_element_id').focus(), la surbrillance du contour orange revient toujours au dernier élément d'entrée du formulaire. (Le surlignage n'apparaît pas lorsque le formulaire est soumis à l'aide du bouton d'envoi du formulaire.)

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

Jusqu'à présent, j'ai essayé d'ajouter ce qui suit à 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é d'éditer le jqTouch theme.csspour 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 effet. J'ai également essayé chacun des ajouts suivants au AndroidManifest.xmlfichier:

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

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

Mise à jour: J'ai effectué plus de dépannage avec ceci et à ce jour, j'ai trouvé:

  1. La propriété de contour fonctionne uniquement sur Chrome, pas sur le navigateur Android.

  2. La -webkit-tap-highlight-colorpropriété fonctionne en fait sur le navigateur Android, mais pas sur Chrome. Il désactive la mise en évidence sur la mise au point ainsi que sur le tapotement.

  3. La -webkit-focus-ring-colorpropriété ne semble fonctionner sur aucun des deux navigateurs.

Réponses:


210

Essayer:

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

10
cela ne fonctionne pas avec Android 4.0.4 - quelqu'un a vécu la même chose? (cela fonctionne sur les versions précédentes et 4.1)
最 白 目

6
Android 4.0.4 fonctionne avec: -webkit-user-modify: lecture-écriture-texte clair uniquement;
oori

@oori, mais cela "casse" iOS en faisant apparaître le clavier.
Max

@Max, votre commentaire n'est pas clair. sur iOS - bien sûr, le clavier apparaît une fois que vous vous concentrez sur une zone d'entrée / de texte .. veuillez expliquer
oori

4
@oori OK? Cela n'aide pas avec les éléments non textarea non-input, qui ont fait l'objet de mon commentaire.
Max

43

Fonctionne à 100% sur Android par défaut, Android Chrome et iOS Safari

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

1
cela devrait être la réponse sélectionnée
mlg87

Au lieu d'utiliser, *vous pouvez simplement utiliser button, si votre problème concerne les boutons par exemple.
Brian Burns

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

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


18

Supprimez la case orange sur le focus d'entrée 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

modifier par l' utilisateur pour 4.0.4


Je recherche un correctif [Android 4.1.2] depuis quelques jours maintenant. C'est le seul qui a fonctionné. Un grand merci!
cassi.lup

@Ben la réponse ci-dessus fonctionne à coup sûr ... créez un plunkr / jsfiddle avec votre code, afin que nous puissions vous voir et vous aider.
oori

@Ben user-modify pour 4.0.4 n'est pas une bonne solution pour toute autre solution si vous en avez, merci de la partager.
Amit

12

Essayez pour Focus Line

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

Seule solution de travail pour les appareils Android 4.2 et similaires.
andreszs

10

Sachez que l'utilisation de ce CSS -webkit-user-modify: read-write-plaintext-only;supprimera cet horrible «bogue» de surbrillance - MAIS cela peut tuer la capacité de votre appareil à fournir un clavier spécifique. Pour nous exécutant Android 4.0.3 sur une Samsung Tab 2, nous ne pouvions plus obtenir le clavier numérique. Même en utilisant type = 'number' & / ou type = 'tel'. Très frustrant! BTW, le réglage de la couleur de surbrillance du robinet n'a rien fait pour résoudre ce problème pour cet appareil et la configuration du système d'exploitation. Nous utilisons Safari pour Android.


comment vous exécutez Safari pour Android.
Amit

Hey @Amit, ça fait longtemps que je n'ai pas répondu à ça! il sortait tout droit de l'appareil en tant que norme d'usine, je dirais ... Tab2 était assez nouveau sur le marché à l'époque.
Fivebears

7

Pour vous assurer que le tap-highlight-colorremplacement de propriété fonctionne pour vous, considérez d'abord ces éléments:

Ne fonctionne pas:
-webkit-user-modify: lecture-écriture-clair uniquement;
// Il déclenche parfois le pop-up du clavier natif en cliquant sur l'élément

.class: active, .class: focus {-webkit-tap-highlight-color: rgba (0,0,0,0); }
// Cela ne fonctionne pas s'il est défini pour les états

Travail:
.class { -webkit-tap-highlight-color: rgba(0,0,0,0); }

Ce cas fonctionne pour Android de la v2.3 à la v4.x même dans une application PhongeGap. Je l'ai testé sur Galaxy Y avec Android 2.3.3, sur Nexus 4 avec Android 4.2.2 et sur Galaxy Note 2 avec Android 4.1.2. Ne le définissez donc pas uniquement pour les états de l'élément lui-même.


1
Cette astuce est ce qui l'a fait fonctionner pour moi avec une WebView sur Android 2.3.
dAngelov

WOOOOW Celui-ci a fonctionné !! (Android 4.1.2) Putain! Je déteste la fragmentation du webview !!
Someone Somewhere

6

Utilisez le code ci-dessous dans le fichier CSS

  * {
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    }
    :focus {
        outline: 0;
        border:none;
        color: rgba(0, 0, 0, 0);
    }

C'est du travail pour moi. J'espère que cela fonctionnera pour vous.


2

Cela ne fonctionnait pas pour moi sur les liens de la zone de carte d'image, la seule solution de travail était d'utiliser javascript en capturant l'événement ontouchend et en empêchant le comportement par défaut du navigateur en retournant false sur le gestionnaire.

avec jQuery:

$("map area").on("touchend", function() {
   return false;
});

2

Je voulais juste partager mon expérience. Je n'ai pas vraiment réussi à faire fonctionner cela et je voulais éviter le lent css- *. Ma solution était de télécharger le bon vieux Eric Meyer Reset CSS v2.0 ( http://meyerweb.com/eric/tools/css/reset/ ) et d'ajouter celui-ci à mon projet phonegap. J'ai ensuite ajouté:

-webkit-tap-highlight-color: rgba(0, 0, 0, 0);   /** Disable orange highlight */

D'après mon expérience, c'est une approche plus rapide du *, mais c'est aussi une approche des bogues moins étranges. La combinaison de tap-highlight, -webkit-user-modify: lecture-écriture-texte en clair uniquement et la désactivation de la mise en évidence de texte par exemple nous a fourni beaucoup de headaces. L'un des pires est que la saisie au clavier cesse soudainement de fonctionner et ralentit la visualisation du clavier.

Réinitialisation complète du CSS avec la surbrillance orange désactivée:

/**
 * Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/)
 * http://cssreset.com
 */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);   /** Disable orange highlight */
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

1

J'ai essayé celui-ci et j'ai bien fonctionné: -

HTML: -

<a class="html5logo"  href="javascript:void(0);"  ontouchstart="return true;"></a>

css

.html5logo {
  display: block;
  width: 128px;
  height: 128px;
  background: url(/img/html5-badge-128.png) no-repeat;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  -webkit-tap-highlight-color: transparent; /* For some Androids */
}
.html5logo:active {
  -webkit-transform: scale3d(0.9, 0.9, 1);
}

-webkit-tap-highlight-color: transparent; -> super, résolu le problème pour Nexus5 (Chrome) et Kindle Fire HD 7 ''. Toutes les autres options n'ont pas aidé pour ces appareils / navigateur. Attention, Firefox et Opera n'avaient pas besoin de la ligne sur Nexus5.
Michael Biermann

1

Cela fonctionnera non seulement pour les robinets, mais également pour le survol:

button, button:hover, li:hover, a:hover , li , a , *:hover, * {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
}

0
<EditText
            android:id="@+id/edittext"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"  
            android:background="@android:drawable/editbox_background_normal"                 

 />

0

Cela fonctionne pour moi dans Ionic, il suffit de mettre un fichier CSS à écraser

:focus {
    outline-width: 0px;
}

-1

Si la conception n'utilise pas de contours, cela devrait faire le travail:

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

-1

Essayez de suivre le code qui désactive le contour de la bordure

aperçu: aucun! important;

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.