单击手机浏览器上的图标时显示边框

Question

I have an icon that you can interact with, basically you click on it and it toggles an visibility class.

The problem is when i click/touch it on my phone you can see like a blue marker on top of it. the function etc works, you just get that blue square in the middle of the process, which doesn't look very professionell. See image below, icon in upper corner, in the middle of the process of it being clicked.

It doesn't happen in any of my computers browsers.

And the code looks like this. CSS:

width: 22px;
height: 21px;
position: absolute;
top: 0;
right: 0;
margin: 14px;
cursor: pointer;

HTML:

<img src="assets/images/heart_empty_icon.png" id="unlike" ng-click="changeLikeIcon()" />

I have added the element to jsfiddle: http://jsfiddle.net/W4Km8/6785/ and tried it on my phone from there, but same result.

Anyone know why this happens and how i can solve it?

Answer 1

User selection

I think that what happen is the user select the images like you would select text in a desktop browser. Adding user-select: none; to your css with the proper prefixes should work.

You can take a look at these links for more informations

CSS Tricks articles

MDN

Answer 2

Try this

#unlike {
  width: 22px;
  height: 21px;
  position: absolute;
  top: 0;
  left: 0;
  margin: 14px;
  cursor: pointer;
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0); 
  -webkit-tap-highlight-color: transparent; 
}