Désactiver le contour orange sur le focus

Essayer:

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

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

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

Travailler sur Android par défaut, 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; } 

Supprimer 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

utilisateur modifier pour 4.0.4

Essayez la ligne de mise au point

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

Sachez que l’utilisation de ce CSS -webkit-user-modify: read-write-plaintext-only; Enlèvera cet horrible point culminant «bug» – MAIS cela peut tuer la capacité de votre appareil à fournir un clavier spécifique. Pour nous, sous Android 4.0.3 sur un 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 mise en évidence n’a rien fait pour résoudre ce problème pour ce périphérique et la configuration du système d’exploitation. Nous courons Safari pour Android.

Pour vous assurer que la propriété tap-highlight-color fonctionne à votre place, considérez d’abord les points suivants:

Ne fonctionne pas:
-webkit-user-modify: lecture-écriture-texte seulement;
// Parfois, le clavier natif se déclenche lorsque vous cliquez sur l’élément

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

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

Ce cas fonctionne pour Android de v2.3 à 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. Donc , ne le définissez pas pour les états uniquement pour l’élément lui-même.

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 fonctionne pour vous.

Cela ne fonctionnait pas pour moi sur les liens de la zone Image Map, la seule solution était d’utiliser JavaScript en capturant l’événement ontouchend et en empêchant le comportement du navigateur par défaut en renvoyant false sur le gestionnaire.

avec jQuery:

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

Je voulais juste partager mon expérience. Je n’ai pas vraiment fait fonctionner ceci, et je voulais éviter le css- * lent. Ma solution a été de télécharger le bon vieux CSS CSS d’Eric Meyer’s Reset ( http://meyerweb.com/eric/tools/css/reset/ ) et de l’append à 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, il s’agit d’une approche plus rapide du *, mais c’est aussi une approche des bogues moins bizarres. La combinaison de tap-highlight, -webkit-user-modify: lecture-écriture-texte en clair uniquement et désactivation, par exemple, de la mise en surbrillance du texte nous ont fourni beaucoup de titres. L’un des pires étant que soudainement, la saisie au clavier cesse de fonctionner et ralentit la visualisation du clavier.

Terminer la réinitialisation 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, ssortingke, 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; } 

J’ai essayé celui-ci et j’ai bien travaillé: –

HTML: –

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

Cela fonctionnera non seulement pour les robinets, mais aussi en vol stationnaire:

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

Si la conception n’utilise pas les contours, cela devrait faire l’affaire:

 *, *::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; } 

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

plan: aucun! important;