css - Anyway to prevent the Blue highlighting of elements in Chrome when clicking quickly?

Question

Most of the time I'm not worried about it but I have an image carousel and if I click on the next and previous divs quickly, they will be highlighted in Chrome.

I tried using outline:none but no effect. Are there any solutions out there?

Answer 1

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