CODEWITHSUNDEEP
androidhtmlcss
qua1ity
qua1ity

Reputation: 623

Showing border when clicking icon on phones browser

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.

enter image description here

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?

Upvotes: 0

Views: 90

Answers (2)

Nenad Vracar
Nenad Vracar

Reputation: 122047

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

Upvotes: 0

Raphael Parent
Raphael Parent

Reputation: 484

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

Upvotes: 1

Related Questions