CODEWITHSUNDEEP
htmlcss
Arun Tyagi
Arun Tyagi

Reputation: 2256

How to remove blue border between i tags

I have this 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>

when I click on any element more than once, there is a blue color appearing between those, check image

this is not outline. How can I avoid/remove this blue line

enter image description here

Upvotes: 1

Views: 105

Answers (2)

Miquel Al. Vicens
Miquel Al. Vicens

Reputation: 376

This is because of a selection mark of mouse. user-select CSS property can help you to avoid this appearance.

Upvotes: 1

andreas
andreas

Reputation: 16936

With clicking multiple times in a short amount of time, you activate the text selection. So what you are actually doing is to select the space between the white-elements.

If you want to prevent the selection, you can add an additional class as proposed in 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;
}

Upvotes: 2

Related Questions