web-dev-qa-db-fra.com

Désactiver les contours orange surlignés

Je code une application à l'aide de jQuery, jqTouch et phonegap et rencontre un problème persistant qui se pose lorsqu'un utilisateur envoie un formulaire à l'aide du bouton Exécuter 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 mise en surbrillance du contour orange revient toujours au dernier élément d'entrée du formulaire. (La surbrillance n'apparaît pas lorsque le formulaire est soumis à l'aide du bouton de soumission de formulaire.)

Ce qu'il me faut, c'est trouver un moyen de désactiver complètement le surlignage orange ou de le faire passer au même élément d'entrée que le curseur.

Jusqu'ici, j'ai essayé d'ajouter ce qui suit à mon CSS:

.class_id:focus {
    outline: none;
}

Cela fonctionne dans Chrome mais pas sur l'émulateur ni sur mon téléphone. J'ai également essayé de modifier jqTouch theme.css Comme suit:

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 fichier AndroidManifest.xml:

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

Aucun d'entre eux n'a aucun effet.

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

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

  2. La propriété -webkit-tap-highlight-color Fonctionne en fait sur le navigateur Android, mais pas sur Chrome. Elle désactive la mise en surbrillance sur le focus et sur l'écran tactile.

  3. La propriété -webkit-focus-ring-color Ne semble pas fonctionner sur aucun navigateur.

androidfocushighlightoutline
104
eggdeng

Essayer:

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

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

35
yesil

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;
}
35
sergey_c

Supprimez le cadre 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

ser-modify pour 4.0.4

18
oori

Essayez de ligne de mise au point

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

Sachez que l’utilisation de ce CSS -webkit-user-modify: read-write-plaintext-only; _ SUPPRIMERA cet horrible "bug" - MAIS cela pourrait tuer la capacité de vos appareils de fournir un clavier spécifique. Pour nous exécutant Android 4.0.3 sur un Samsung Tab 2, nous ne pouvions plus obtenir le clavier numérique. Même en utilisant type = 'numéro' &/ou type = 'tel'. Très frustrant! Par ailleurs, le réglage de la couleur de surlignage du tapotement n'a pas permis de résoudre ce problème pour cet appareil et la configuration du système d'exploitation. Nous utilisons Safari pour Android.

10
Fivebears

Pour vous assurer que la propriété tap-highlight-color Remplaçant fonctionne pour vous, tenez compte des points suivants:

Ne fonctionne pas:
- webkit-user-modify: lecture-écriture-texte brut 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); }
// Il ne fonctionne pas s'il est défini pour les états

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

Cette affaire 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. ne le définissez pas pour des états uniquement pour l'élément lui-même.

7
RynoRn

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 un travail pour moi. J'espère que ça marche pour vous.

6
Kailas

Je voulais juste partager mon expérience. Je n'ai pas vraiment réussi à faire fonctionner cela, et je voulais éviter les ralentis css- *. Ma solution consistait à télécharger Reset CSS v2.0 du bon vieil Eric Meyer ( http://meyerweb.com/eric/tools/css/reset/ ) et à l'ajouter à 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 bugs moins étranges. La combinaison de tap-highlight, -webkit-user-modify: lecture-écriture-texte-clair uniquement et désactivation de, par exemple, la mise en surbrillance du texte nous a fourni beaucoup de têtes. L’un des pires problèmes est que l’intervention du clavier s’arrête soudainement et ralentit la visualisation du clavier.

Réinitialisation complète de 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;
}
2
Sindre

Cela ne fonctionnait pas pour moi sur les liens Image Map Area. La seule solution efficace consistait à utiliser javascript en capturant l'événement ontouchend et à empêcher le comportement du navigateur par défaut en renvoyant la valeur false sur le gestionnaire.

avec jQuery:

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

J'ai essayé celui-ci et a 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);
}
1
Ashoka Mondal

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

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

Ce travail pour moi dans Ionic, vient de mettre dans un fichier CSS pour écraser

:focus {
    outline-width: 0px;
}
1
Snow Bases

Si la conception n'utilise pas de 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;
}
0
Robert Richter
<EditText
            Android:id="@+id/edittext"
            Android:layout_width="wrap_content"
            Android:layout_height="wrap_content"  
            Android:background="@Android:drawable/editbox_background_normal"                 

 />
0
Android