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

Question

我有一个可以与之互动的图标，基本上你点击它就会切换一个可见性类。

问题是当我在手机上点击/触摸它时，你可以看到它上方的蓝色标记。功能等工作，你只是在过程中间得到蓝色方块，这看起来不太专业。请参阅下图，上角的图标，点击过程中间的图标。

在我的任何计算机浏览器中都不会发生这种情况。

代码看起来像这样。 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()" />

我已将元素添加到jsfiddle：http://jsfiddle.net/W4Km8/6785/ 并从那里尝试了我的手机，但结果相同。

任何人都知道为什么会发生这种情况以及如何解决这个问题？

Answer 1

用户选择

我认为发生的事情是用户选择图像就像在桌面浏览器中选择文本一样。使用正确的前缀将user-select: none;添加到您的css应该有效。

您可以查看这些链接以获取更多信息

CSS Tricks articles

MDN

Answer 2

试试这个

#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; 
}