0

I have the following very basic HTML code:

<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
* {
    outline: none;
}
a {
    padding: 6px 20px;
    border: 1px solid #bdbdbd;
    border-radius: 6px;
    text-decoration: none;
    font-size: 100px;
}
a:active {
    box-shadow: 0px 0px 4px 0px #b9b9b9;
    -webkit-box-shadow: 0px 0px 4px 0px #b9b9b9;
}

</style>
<title>IPhone - Button</title>
</head>
<body>
    <a href="#">Long Press This</a>
</body>
</html>

and when I open it on a real IPhone device I get the following:

enter image description here

but when I long press the button I get the following:

enter image description here

with that very annoying gray-highlighted background.

I get that annoying effect only on IPhone. I tried the same on the rest of browsers (Android, Windows, MacOS) without getting that effect.

Any idea on how to get rid of that?

Here you have an inline demo of the code:

* {
 outline: none;
}
a {
 padding: 6px 20px;
 border: 1px solid #bdbdbd;
 border-radius: 6px;
 text-decoration: none;
 font-size: 40px;
}
a:active {
 box-shadow: 0px 0px 4px 0px #b9b9b9;
 -webkit-box-shadow: 0px 0px 4px 0px #b9b9b9;
}
<a href="#">Long Press This</a>

Please, notice that I need that box-shadow above at the same time I get rid of the gray highlight. In other words, I need the same effect I get on the rest of browsers.

Here it is also on JSFiddle.net:

http://jsfiddle.net/05kqt7m3/

http://jsfiddle.net/05kqt7m3/embedded/result/

Thanks!

davidesp
  • 3,743
  • 10
  • 39
  • 77

1 Answers1

1

Have you tried:

<style type="text/css">
* {
    -webkit-touch-callout: none;
    -webkit-user-select: none; /* Disable selection/copy in UIWebView */
}
</style>

As shown in Disabling user selection in UIWebView

Bas van Dijk
  • 9,933
  • 10
  • 55
  • 91