Its easy for someone to select your content and copy paste in their blog or web page. if you have noticed that someone copying your content then you have the option to file a DMCA. but what if you don’t allow them to select your content by disabling user selection of text in your website or blog. Even you have the option to disable selection on a specific content. We have done these things using Javascript/jQuery earlier. But its not works when user disable javascript on their browser, once they disabled the javascript on the browser then it cannot stop them to copy your content. One more disadvantage of using javascript to disable selection is that it effects to the loading time of the web page. So, I am recommending you to use pure CSS in order to disable select option in your webpage. Here is how you can use CSS to disable selection of text in a web page.
Its about a small CSS line that prevent users to highlight the text in your webpage. there’s experimental property known as “user select” that enables you to define new instructions when someone trying to highlight/select your content. This simple method will help you to make it harder for someone to select the content and copy on their own blog or website.
To disable selection of text in a web page, all you will need to do is use this CSS property.
.disable_text_highlighting {
-webkit-touch-callout: none;
-webkit-user-select: none; /* Webkit */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* IE 10 */
/* Currently not supported in Opera but will be soon */
-o-user-select: none;
user-select: none;
}
The values on this property :
- Auto – Visitors can select all content in the element.
- None – Selecting content is disabled.
- Text – Can only select text content.
