Eddy Eddy - 16 days ago 6
CSS Question

make text not selectable on iPad

Been trying to make some text within a tag unelectable on an iPad, but nothing seems to work. Can anyone help please?



#unselectable{
font-size: 2em;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: moz-none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
}

<p id="unselectable">Make this text unselectable, also on ipad.</p>




Answer

Just copy the following code inside your css

-webkit-touch-callout: none;

So your css will be like this

#unselectable{
  font-size: 2em;
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none; /* Chrome/Safari/Opera */
  -khtml-user-select: none; /* Konqueror */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* Internet Explorer/Edge */
   user-select: none; /* Non-prefixed version, currently
                              not supported by any browser */
 }

Hope it will work in safari. Let me know!