Disable text selection on your website to prevent stealing content

Sometimes it is very necessary to disable user selection just to prevent stealing your valuable content. You can have different reasons to do that.

Different ways to disable text selection on your website 

According to Can I use, the user-select is currently supported in almost all major browsers but still needs a vendor prefix. The non-prefixed version is currently supported by Chrome, Edge, Opera, and Firefox.

1: Use CSS classes for a specific element

The following code will solve your issues for all browsers. You can use this code for a specific portion of your website. 

CSS:

.ClassName{
  -webkit-touch-callout: none; /* for iOS Safari */
  -webkit-user-select: none; /* for Safari */
  -khtml-user-select: none; /* for Konqueror HTML */
  -moz-user-select: none; /* for Old versions of Firefox */
  -ms-user-select: none; /* for Internet Explorer/Edge */
   outline-style: none; /* Internet Explorer */
   user-select: none; 
   standard-user-select: none;
}

HTML:

<p class="ClassName">
  This is non selectable text.
</p>

2: Disable selection for the whole website

If you want to disable text selection for the entire website and whole elements, then use * instead of Class or Id. You just put the following code on your CSS file, nothing else to do. 

* {
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    user-select: none;
    outline-style: none;
    standard-user-select: none;
}

3: Disable selection for the whole website instead of specific elements

If you want to disable user selection instead of some elements, then first of all you have to disable selection for the whole website and then make it re-selectable for specific elements. Follow the example below. Just put the following code on your CSS file, nothing else to do. 

* {
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    user-select: none;
    outline-style: none;
    standard-user-select: none;
}
p, input  {
    -webkit-user-select: text;
    -khtml-user-select: text;
    -moz-user-select: text;
    -o-user-select: text;
    user-select: text;
    standard-user-select: text;
}

In the solutions, selection will be stopped, but the user still thinks they can select text because the cursor still changes. To keep it static, you'll have to set your CSS cursor: cursor: default;. This will make your text totally flat as it would be in a desktop application.

For Internet Explorer, in addition, you need to add pseudo-class focus (.ClassName:focus) and outline-style: none; to get the exact result.