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

This is also useful in protecting content that you don't want copied or saved, such as an image:

yourdiv img {-webkit-touch-callout: none; }