Disable Blue Highlight When Touch/Press Object With Cursor:Pointer

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.

How to remove blue-box-fill when clicking the buttons?

The property you're looking for is tap-highlight-color

-webkit-tap-highlight-color: transparent;

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:
Sample Image

How to remove the blue highlight of button on mobile?

You can add:

-webkit-tap-highlight-color: transparent;

You can also add this to your stylesheets to define it globally:

input,
textarea,
button,
select,
a {
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}

Hope this helps :)

You can find the documentation here for more info: https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/AdjustingtheTextSize/AdjustingtheTextSize.html#//apple_ref/doc/uid/TP40006510-SW5

Tailwindcss. Blue rectangle when click on mobile device

* { -webkit-tap-highlight-color: rgba(0,0,0,0); }

It works well.

How to disable click active style (clickable DIV) on touch devices?

You can use this:

.your-class {
    -webkit-tap-highlight-color: transparent;
}

Mobile Web - Disable long-touch/taphold text selection

Reference:

jsFiddle Demo with Plugin

The above jsFiddle Demo I made uses a Plugin to allow you to prevent any block of text from being selected in Android or iOS devices (along with desktop browsers too).

It's easy to use and here is the sample markup once the jQuery plugin is installed.

Sample HTML:

<p class="notSelectable">This text is not selectable</p>

<p> This text is selectable</p>

Sample jQuery:

$(document).ready(function(){

   $('.notSelectable').disableSelection();

});

Plugin code:

$.fn.extend({
    disableSelection: function() {
        this.each(function() {
            this.onselectstart = function() {
                return false;
            };
            this.unselectable = "on";
            $(this).css('-moz-user-select', 'none');
            $(this).css('-webkit-user-select', 'none');
        });
        return this;
    }
});

Per your message comment: I still need to be able to trigger events (notably, touchstart, touchmove, and touchend) on the elements.

I would simply would use a wrapper that is not affected by this plugin, yet it's text-contents are protected using this plugin.

To allow interaction with a link in a block of text, you can use span tags for all but the link and add class name .notSelected for those span tags only, thus preserving selection and interaction of the anchors link.

Status Update: This updated jsFiddle confirms you concern that perhaps other functions may not work when text-selection is disabled. Shown in this updated jsFiddle is jQuery Click Event listener that will fire a Browser Alert for when the Bold Text is clicked on, even if that Bold Text is not text-selectable.

How to remove the border highlight on an input text element

Before you do that, keep in mind that the focus outline is an accessibility and usability feature; it clues the user into what element is currently focused, and a lot of users depend on it. You need to find some other means to make focus visible.

In your case, try:

input.middle:focus {
    outline-width: 0;
}

Or in general, to affect all basic form elements:

input:focus,
select:focus,
textarea:focus,
button:focus {
    outline: none;
}

In the comments, Noah Whitmore suggested taking this even further to support elements that have the contenteditable attribute set to true (effectively making them a type of input element). The following should target those as well (in CSS3 capable browsers):

[contenteditable="true"]:focus {
    outline: none;
}

Although I wouldn't recommend it, for completeness' sake, you could always disable the focus outline on everything with this:

*:focus {
    outline: none;
}