Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

People also ask

How do I remove blue highlight on click?

Answer: Use the CSS ::selection pseudo-element By default, when you select some text in the browsers it is highlighted normally in blue color. But, you can disable this highlighting with the CSS ::selection pseudo-element.

How do I turn off blue highlights?

Your highlight settings To turn the blue highlights off, open the Settings page from the main menu, and select "Reading" from the left column. Here you'll be able to toggle "Disable Full Screen" and "Show highlights in full screen" to the off position.

Why is the search bar highlighted in blue?

That can be caused by the "Keystroke protection" in Comcast Constant Guard. For me, the google search bar turns blue once I've typed in a search term, but then want to click on it again to change or add something. The entire bar turns blue.

What is Webkit tap highlight color?

-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.


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.