Mobile Web - Disable long-touch/taphold text selection

android iphone css mobile highlight
Brad Orego picture Brad Orego · Jun 28, 2012 · Viewed 38.8k times · Source

I've seen/heard all about disabling text selection with the variations of user-select, but none of those are working for the problem I'm having. On Android (and I presume on iPhone), if you tap-and-hold on text, it highlights it and brings up little flags to drag and select text. I need to disable those (see image):

screenshot

I've tried -webkit-touch-callout to no avail, and even tried things like $('body').on('select',function(e){e.preventDefault();return;}); to no avail. And the cheap tricks like ::selection:rgba(0,0,0,0); won't work either, as hiding these won't help - selection still happens and it disrupts the UI. Plus I'm guessing those flags would still be there.

Any thoughts would be great. Thanks!

Answer

CoreyRS picture CoreyRS · Jun 28, 2012 
-webkit-touch-callout:none;
-webkit-user-select:none;
-khtml-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none;
-webkit-tap-highlight-color:rgba(0,0,0,0);

This will disable it for every browser going.

Related questions

Disable scrolling in all mobile devices

This sounds like there should be a solution for it all over the internet, but I am not sure why I cannot find it. I want to disable Horizontal scrolling on mobile devices. Basically trying to achieve this: body{ overflow-x:…

Read More
Do iPhone / Android browsers support CSS @media handheld?

I want to change my web page CSS for web browsers running on cell phones, like the iPhone and Android. I've tried something like this in the CSS file: @media handheld { body { color: red; } } But it doesn't seem to have …

Read More
@font-face not working in mobile Webkit

I'm having trouble getting @font-face to behave in any mobile Webkit browser I've tested--Safari on an iPhone 3GS, the default Android 2.2 browser, and Dolphin browser on Android. It works in all desktop browsers, from IE7 to IE9, FF3.5, Safari 4, and …

Read More