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?

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

You can use pure CSS to accomplish this. Here's a rundown for multi-browser support, chrome being covered by the first line and the final :focus bit. Details below.

.noSelect {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.noSelect:focus {
    outline: none !important;
}

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. Some have suggested using JavaScript, but I believe this is the cleanest solution.

For Android/Safari mobile/Edge

-webkit-tap-highlight-color: transparent; is the additional rule you may be looking for. Affects Chrome desktop (esp. with touchscreen) and mobile devices. Here's a warning about using this non-standard property, as well as some accessibility concerns with suggestions. Best practice is to replace the highlight with your own styling.

UPDATE: Later versions of Chrome...

A commenter on this answer pointed out :focus { outline: none !important;} is needed for newer versions of Chrome. Answer adapted to include this, as well! Ah, ever-changing standards.

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;
}

But, sometimes, even with user-select and touch-callout turned off, cursor: pointer; may cause this effect, so, just set cursor: default; and it'll work.

To remove the blue overlay on mobiles, you can use one of the following:

-webkit-tap-highlight-color: transparent; /* transparent with keyword */
-webkit-tap-highlight-color: rgba(0,0,0,0); /* transparent with rgba */
-webkit-tap-highlight-color: hsla(0,0,0,0); /* transparent with hsla */
-webkit-tap-highlight-color: #00000000; /* transparent with hex with alpha */
-webkit-tap-highlight-color: #0000; /* transparent with short hex with alpha */

However, unlike other properties, you can't use

-webkit-tap-highlight-color: none; /* none keyword */

In DevTools, this will show up as an 'invalid property value' or something.

---

To remove the blue/black/orange outline when focused, use this:

:focus {
    outline: none; /* no outline - for most browsers */
    box-shadow: none; /* no box shadow - for some browsers or if you are using Bootstrap */
}

The reason why I removed the box-shadow is because Bootsrap (and some browsers) sometimes add it to focused elements, so you can remove it using this.

But if anyone is navigating with a keyboard, they will get very confused indeed, because they rely on this outline to navigate. So you can replace it instead

:focus {
    outline: 100px dotted #f0f; /* 100px dotted pink outline */
}

---

You can target taps on mobile using :hover or :active, so you could use those to help, possibly. Or it could get confusing.

---

Full code:

element {
    -webkit-tap-highlight-color: transparent; /* remove tap highlight */
}
element:focus {
    outline: none; /* remove outline */
    box-shadow: none; /* remove box shadow */
}

---

Other information:

• If you would like to customise the -webkit-tap-highlight-color then you should set it to a semi-transparent color so the element underneath doesn't get hidden when tapped
• Please don't remove the outline from focused elements, or add some more styles for them.
• -webkit-tap-highlight-color has not got great browser support and is not standard. You can still use it, but watch out!

I had similar issue with <input type="range" /> and I solved it with

> -webkit-tap-highlight-color: transparent;

input[type="range"]{
  -webkit-tap-highlight-color: transparent;
}

 <input type="range" id="volume" name="demo"
         min="0" max="11">
  <label for="volume">Demo</label>

Try creating a handler for select event on those elements and in the handler you can clear the selection.

Take a look at this:

https://stackoverflow.com/questions/3169786/clear-text-selection-with-javascript

It's an example of clearing the selection. You'd only need to modify it to work only on the specific element that you need.

This works the best for me:

.noSelect:hover {
  background-color: white;
}