Disable text selection using CSS

by Posted on

Today i am going to share a useful css code snippet to disable text selection using css, No javascript is required. You can disable text selection purely with CSS of whole page or particular container , If you have a content based website and you are worry to someone could stole my content then you can add these CSS line on your web page so that visitor can not use user friendly default method to copy your content, but this way you can not fully protect your website content from stealing. It just disable text selection , stealer can still use some add-on to copy your content like firebug inspect element etc..




disable-text-selection

Disable text selection using CSS

Below code will disable text selection for whole page.

body {
  -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 */
}

Disable text selection in specific container using CSS

If you don’t want to disable text selection for entire page then you can apply this code on any specific div and any tag. just create a class name disable-selection.

.disable-selection {
  -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 */
}

Now you have two div, one is select-able other is non select-able

<div> Select-able text here...</div>
 
<div class="disable-selection"> non Select-able text here...</div>

You can add disable-selection class on any container where you want to disable text-selection for visitor.

DEMO



If you like this post please don’t forget to subscribe my public notebook for more useful stuff

Published by admin