Anyway to prevent the Blue highlighting of elements in Chrome when clicking quickly?
For Chrome on Android, you can use the -webkit-tap-highlight-color CSS property:
-webkit-tap-highlight-color is a non-standard CSS property that sets the color of the highlight that appears over a link while it's being tapped. The highlighting indicates to the user that their tap is being successfully recognized, and indicates which element they're tapping on.
To remove the highlighting completely, you can set the value to transparent
:
-webkit-tap-highlight-color: transparent;
Be aware that this might have consequences on accessibility: see outlinenone.com
In addition to the link provided by Floremin, which clears text selection using JavaScript to "clear" the selection, you can also use pure CSS to accomplish this. The CSS is here...
.noSelect {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
Simply add the class="noSelect"
attribute to the element you wish to apply this class to. I would highly recommend giving this CSS solution a try. Nothing wrong with using the JavaScript, I just believe this could potentially be easier, and clean things up a little bit in your code.
For chrome on android
-webkit-tap-highlight-color: transparent;
is an additional rule you may want to experiment with for support in Android.
I'm running Chrome version 60 and none of the previous CSS answers worked.
I found that Chrome was adding the blue highlight via the outline
style. Adding the following CSS fixed it for me:
:focus {
outline: none !important;
}