如何删除i标签之间的蓝色边框

Question

我有这个HTML

<div class="text-center" style="position: absolute;z-index: 9;bottom: 1%; width:100%; color:rgba(0, 0, 0, 0.51);font-size:50px;">
 <i class="fa fa-plus-circle pointer" title="Zoom In" onclick="foyrPlayer.OnPanoramaButtonPressed('zoomin');"></i>
 <i class="fa fa-minus-circle pointer" title="Zoom Out"  onclick="foyrPlayer.OnPanoramaButtonPressed('zoomout');"></i>
 <i class="fa fa-arrow-circle-left pointer" title="Back"  onclick="prevLevelSection()"></i>
 <i class="fa fa-adjust pointer " title="Change Color"  onclick="toggleVariant();"></i>
</div>

当我多次点击任何元素时，它们之间会出现蓝色，检查图像

这不是大纲。如何避免/删除此蓝线

Answer 1

在短时间内多次单击，即可激活文本选择。所以你实际做的是选择白色元素之间的空间。

如果您想阻止选择，可以按照this post中的建议添加其他课程：

*.unselectable {
   -moz-user-select: -moz-none;
   -khtml-user-select: none;
   -webkit-user-select: none;

   /*
     Introduced in IE 10.
     See http://ie.microsoft.com/testdrive/HTML5/msUserSelect/
   */
   -ms-user-select: none;
   user-select: none;
}

Answer 2

这是因为鼠标的选择标记。 user-select CSS属性可以帮助您避免这种情况。