Streaming live at 10am (PST)

Blue (Android) or grey (iPhone) selection square on buttons when pressed


#1

Hello,

I'm kind of stuck with buttons that are used for links.

There are three buttons (social) at the bottom of the site (smartphone mode). The two from the right are buttons with a link and the most left one is a "Block Link", which all have that same issue.

When pressed the icon should change to another icon which works. But the issue is that when clicked (on a mobile device, a blue selection is shown on top). How can I disable that effect? What is the right way of doing that?

Here's the preview mode: https://webflow.com/design/glove-mobile?preview=9041d2567671a63209ed683c31ac2081

Regards,
Alexander


#2

Cool mobile site Alex! When I tested your site on an iPhone 4, it showed a grey border. I think it's a phone or browser specific effect that is added to give the touch-user feedback from touching a link.

Here's a link that talks about that: http://stackoverflow.com/questions/17360478/remove-focus-overlay-color-of-webview

Try putting this in your custom code:

<style>
a {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
a:focus {
  outline: 0;
  border:none;
  color: rgba(0, 0, 0, 0);
}
</style>

#3