How to make div or text in html unselectable using CSS

You must have seen certain websites where you cannot select/copy text to clipboard be it web or mobile devices. i.e unselectable elements like div or p. If you want to implement this functionality to your webpage then you can achieve it using simply pure CSS properties/attributes.

Properties to Disable copy to clipboard options.

For iOS and Safari browsers

-webkit-touch-callout : none
-webkit-user-select:none

webkit-touch-callout : none: No callout option will be shown when the user's touch and holds on the element with this attribute.

webkit-user-select : none: You cannot select text on Safari on macOS, if you do a right-click no options to copy is displayed.

For Mozilla firefox browser

-moz-user-select: none;

-moz-user-select: when set to none, text cannot be selected and copied to clipboard on Mozilla firefox browsers.

For Windows Internet Explorer (ie) browsers

-ms-user-select: none; user-select: none;

-ms-user-select: makes text unselectable in ie web and mobile browsers.

For Opera desktop and web browsers

-o-user-select: none;; user-select: none;

-o-user-select: none: makes text unselectable in ie web and mobile Opera browsers.

Example :

<div style="-webkit-user-select: none;
-khtml-user-select: none;
-webkit-touch-callout : none
-moz-user-select: none;
-o-user-select: none;
user-select: none; background:#ffff22">
This text cannot be copied to the clipboard. Just try doing it :D </div>

Now let's create a div tag and add the above code in style attribute to check if it works!

Demo :