Anyway to Prevent the Blue Highlighting of Elements in Chrome When Clicking Quickly

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

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.

Is there a way to remove the blue highlight for a checkbox?

It may be the tap-highlight-color which you can make transparent with the following code:

.switch {
-webkit-tap-highlight-color: transparent
}

See also https://stackoverflow.com/a/21003770/753676 which mentions this and the user-select: none and -webkit-touch-callout: none approach.

But for Chrome on mobile you still need the -webkit-tap-highlight-color setting.

How disable the blue boundary box when a touch occurs on chrome mobile?

You have to set -webkit-tap-highlight-color:transparent or -webkit-tap-highlight-color:rgba(0,0,0,0) to remove the default hightlight tap color on chrome.

https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-tap-highlight-color

About bootstrap, the default css contains the property, as you can see here:

Disable blue stroke effect on button clicked

remove the focus css:

button:focus {outline:0;}

For touchscreens:

@media (hover: hover) {
    button:hover {
        outline:0;
    }
}

cant remove blue highlight chrome on focus

Add this CSS

.help-center .hc-search-form:focus-within{
   border: 0 none;
   box-shadow: none;
}

How do I remove the blue border that appears when clicking on a uib-accordion-heading?

Solution

:focus {outline:0 !important;}

This code all focus border remove.

---

Related Topics