Disable Blue Highlight when Touch/Press object with Cursor:Pointer

Solution 1:

-webkit-tap-highlight-color:  rgba(255, 255, 255, 0); 

Takes care of the problem, as it sets the highlight color transparent.

Source: http://samcroft.co.uk/2012/alternative-to-webkit-tap-highlight-color-in-phonegap-apps/

Solution 2:

As far as I have known,Vlad K's answer could cause problems in some android devices.Better solution:

-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-tap-highlight-color: transparent;

Solution 3:

Simply add this to your stylesheet and simply add the class="no_highlights" attribute to the element you wish to apply this class to.

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

or you can do this globally for all the elements by removing class name and doing this.

button,
textarea,
input,
select,
a{
 -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 -webkit-tap-highlight-color: transparent;
 -webkit-user-select: none;
 -khtml-user-select: none;
 -moz-user-select: none;
 -ms-user-select: none;
  user-select: none;

}

Thanks :) but anyway. blue border is there as a accessibility feature. Its looks bad but, Its helps someone who needed it most.