Disable the text-highlighting magnifier on touch-hold on Mobile Safari / Webkit

Question

I have some elements in my iPhone website that don't have any text in them but require the user to click and hold on them (DIVs). This causes the text-highlighting/editing loop/cursor to show up, which is really distracting.

I know there is a CSS rule for removing the black-box that shows up on clickable elements when they are touched. Is there anything like that to disable the text magnifier?

Answer 1

Just got a response from the Developer Center help desk. I needed to add this CSS rule:

-webkit-user-select: none;

Answer 2

Add this to the CSS

body {
-webkit-touch-callout: none;                /* prevent callout to copy image, etc when tap to hold */
-webkit-text-size-adjust: none;             /* prevent webkit from resizing text to fit */
-webkit-user-select: none;                  /* prevent copy paste, to allow, change 'none' to 'text' */}

Answer 3

Use these CSS rules:

-webkit-touch-callout: none;
-webkit-user-select: none; /* Disable selection/copy in UIWebView */