Smith Smith - 3 months ago 32
CSS Question

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

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?


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.

-webkit-tap-highlight-color: rgba(255, 255, 255, 0); is an additional rule you may want to experiment with.