Quoi qu'il en soit pour empêcher la mise en évidence bleue des éléments dans Chrome lorsque vous cliquez rapidement?

123

La plupart du temps, je ne suis pas inquiet à ce sujet mais j'ai un carrousel d'images et si je clique rapidement sur les divs suivante et précédente, elles seront mises en évidence dans Chrome.

J'ai essayé d'utiliser contour: aucun mais aucun effet. Existe-t-il des solutions?

css google-chrome Forgeron
la source
Je ne vois pas cet effet sur la version actuelle de Chrome
Billal Begueradj
Je sais que votre cas d'utilisation est différent, mais pour quiconque souhaite le supprimer de tous les liens, je ne recommande pas de le faire. J'ai essayé de le supprimer sur une PWA, mais sans le retour visuel, la perception de l'utilisateur est que l'application est plus lente.
collimarco

Réponses:

170

En plus du lien fourni par Floremin , qui efface la sélection de texte en utilisant JavaScript pour "effacer" la sélection, vous pouvez également utiliser du CSS pur pour ce faire. Le CSS est là ...

.noSelect {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

Ajoutez simplement l' class="noSelect"attribut à l'élément auquel vous souhaitez appliquer cette classe. Je recommanderais vivement d'essayer cette solution CSS. Il n'y a rien de mal à utiliser le JavaScript, je pense simplement que cela pourrait être plus facile et nettoyer un peu les choses dans votre code.

Pour Chrome sur Android -webkit-tap-highlight-color: transparent; , vous pouvez essayer une règle supplémentaire pour la prise en charge d'Android.

smts
la source
1
Pour Chrome uniquement, vous n'avez probablement besoin que de user-selectet webkit-user-select.
smts
C'est la solution que j'utilise car je n'ai que le problème de mise en évidence dans Chrome et cela fonctionne très bien. Merci à tous ceux qui ont participé!
Smith
36
Impossible de le faire fonctionner avec Chrome sur Android. Je devais utiliser-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
Iwazaru
25
-webkit-tap-highlight-color: transparent; est la partie clé sur Chrome
FisNaN
Pour Chrome sur Android -webkit-tap-highlight-color: transparent; - A travaillé pour moi merci!
CK Munn
213

Pour Chrome sur Android, vous pouvez utiliser la propriété CSS -webkit-tap-highlight-color :

-webkit-tap-highlight-color est une propriété CSS non standard qui définit la couleur de la surbrillance qui apparaît sur un lien pendant qu'il est tapé. La mise en surbrillance indique à l'utilisateur que son robinet est reconnu avec succès et indique sur quel élément il appuie.

Pour supprimer complètement la mise en évidence, vous pouvez définir la valeur sur transparent:

-webkit-tap-highlight-color: transparent;

Sachez que cela peut avoir des conséquences sur l'accessibilité: voir outlinenone.com

Iwazaru
la source
4
J'ai constaté que lorsque vous exécutez sur un écran tactile par exemple, Chrome se comporte un peu comme il le fait sur Android. J'avais un <div> qui clignotait en bleu chaque fois que vous cliquiez quelque part à l'intérieur. Ce n'est que lorsque j'ai utilisé cette réponse que cela s'est arrêté. Merci!
Valorum
2
Aucun des autres attys css ne le fera. Si important car la mise en évidence du robinet déforme l'apparence de tout ce qui est cliqué, brouillant votre langage visuel.
Dominic Cerisano
23
-webkit-tap-highlight-color: transparent;semble fonctionner aussi.
Bernard
1
J'ai aimé ça, pour les événements tactiles c'est un must! Cette information a une utilité "hors du tableau"!
Berker Yüceer le
1
C'est la solution qui a fonctionné pour moi en 2020
Blue Bot
66

J'utilise la version 60 de Chrome et aucune des réponses CSS précédentes n'a fonctionné.

J'ai trouvé que Chrome ajoutait le surlignage bleu via le outlinestyle. L'ajout du CSS suivant l'a corrigé pour moi:

:focus {
    outline: none !important;
}
Jeff L.
la source
5
vous, monsieur, êtes un sauveur de vie.
beckah
2
c'est celui qui fonctionne pour Chrome (version 61) sur Android
Stefan
Fonctionne pour les versions plus récentes de Chrome. Merci!
CrazedCoder
Super, je me demandais pourquoi mon fidèle user-select:nonen'allait nulle part
Sean T
J'ai tout essayé mais cela a fonctionné comme du charme. Merci d'avoir sauvé mes cheveux!
Avinash Kumar le
25

Mais, parfois, même avec user-selectet touch-calloutdésactivé, cursor: pointer;peut provoquer cet effet, alors, il suffit de régler cursor: default;et cela fonctionnera.

Gustavo B.
la source
7
Ceci est une réponse correcte, cursor: pointer;provoque vraiment un point culminant. Mais -webkit-tap-highlight-color: transparent;est une solution plus universelle.
yanot
1
@yanot: lisez l'avertissement -webkit-tap-highlight-coloravant de l'étiqueter comme une solution relativement universelle : developer.mozilla.org/en-US/docs/Web/CSS/…
Hassan Baig
@HassanBaig Je pense qu'il est évident que je ne parlais pas de cross-browser universel , mais dans ce contexte, c'est-à-dire à travers différentes versions de chrome
yanot
2
merci - aucune des autres solutions n'a fonctionné pour moi. Il a fallu supprimer le pointeur du curseur pour faire disparaître la surbrillance bleue
RVP
3
cursor: defaultfait l'affaire pour moi quand rien d'autre ne fonctionnait.
Telarian
-2

Essayez de créer un gestionnaire pour l'événement select sur ces éléments et dans le gestionnaire, vous pouvez effacer la sélection.

Regarde ça:

Effacer la sélection de texte avec JavaScript

C'est un exemple d'effacement de la sélection. Il vous suffirait de le modifier pour qu'il ne fonctionne que sur l'élément spécifique dont vous avez besoin.

Floremin
la source
Donc ça ne peut pas être corrigé par CSS, hein? Puis-je simplement effacer le texte sélectionné dans mon gestionnaire de clics? EDIT - Merci pour l'exemple. Cela craint qu'il doive être géré via javascript. J'espérais que ce n'était qu'un problème de CSS.
Smith
Cela aura-t-il également un impact sur l'accessibilité?
Smith
Vous pouvez effacer le texte dans le gestionnaire de clics, mais jetez un œil à la réponse @smts avec du CSS pur.
Floremin
-8

Cela fonctionne le mieux pour moi:

.noSelect:hover {
  background-color: white;
}
nagy.zsolt.hun
la source
6
C'est MAUVAIS et une route vers un certain futur enfer. Aucune offense.
Mike Barwick
et si l'arrière-plan du site Web n'est pas blanc?
rideon88
Ce n'est pas maintenable. Personne ne fait ça s'il vous plait.
Telarian