You know that popup menu that comes up when you tap and hold a link on your iPhone? Well, you can disable it with CSS. I stumbled upon this when developing a recent Phonegap app, and it’s a simple lifesaver.

menu
iOS tap and hold menu default.

-webkit-touch-callout

a {
  -webkit-touch-callout: none;
}

The -webkit-touch-callout css property allows you to dictate the result when a user taps and holds a link in iOS. The default value is default, which will open the dialog menu. By setting it to none, we can disable this function.

As you can see in the image above, the default action dialog box can be nice if you want to open a link in a new tab, copy it, etc. Sometimes however, as is the case with a web app, this becomes more of an annoyance. This simple cleanup makes the UI a bit cleaner.

Android

As you can see above, this property uses a webkit vendor prefix. As of this writing, this seems to only work on iOS. I’ve found fixes for Android, but all require a bit of javascript. If anyone knows of another way, I’d love to hear it!