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

Question

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

问题是当我在手机上点击/触摸它时，您会看到它上面有一个蓝色标记。功能等工作，你只是在过程中间得到那个蓝色方 block ，看起来不太专业。见下图，图标在上 Angular ，在它被点击的过程中。

它不会在我的任何计算机浏览器中发生。

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