web-dev-qa-db-fra.com

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

La plupart du temps, cela ne m'inquiète pas, mais j'ai un carrousel d'images et si je clique rapidement sur les div précédentes et précédentes, elles seront mises en surbrillance dans Chrome.

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

cssgoogle-chrome
92
Smith

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 accomplir cela. 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 le class="noSelect" attribue à l’élément auquel vous souhaitez appliquer cette classe. Je recommande fortement d'essayer cette solution CSS. Rien de mal à utiliser JavaScript, je pense simplement que cela pourrait être potentiellement plus facile et nettoyer un peu les choses dans votre code.

Pour chrome sur Android -webkit-tap-highlight-color: transparent; est une règle supplémentaire que vous souhaiterez peut-être expérimenter pour la prise en charge d'Android.

116
smts

Pour Chrome sur Android, vous pouvez utiliser la propriété CSS - de 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 son exploitation. La mise en surbrillance indique à l'utilisateur que son tapotement a été reconnu avec succès et indique sur quel élément il tapote.

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

-webkit-tap-highlight-color: transparent;
160
Iwazaru

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

J'ai trouvé que Chrome ajoutait la surbrillance bleue via le style outline. L'ajout du code CSS suivant l'a corrigé pour moi:

:focus {
    outline: none !important;
}
45
Jeff L.

Mais parfois, même avec user-select et touch-callout éteindre, cursor: pointer; peut provoquer cet effet, il suffit donc de définir cursor: default; et ça va marcher.

13
Gustavo B.