Disable Text Selection using CSS

If you are wanted to disable text selection of your content then you are at the right place. In this article, I will guide you the easiest method to disable text selection using CSS. There are many reasons can be found to disable text selection. Mostly persons disable text selection because of content security. In the world of websites, content is the king. According to common phenomena mostly persons are a content thief.

Did you know: How to Remove Space Between Inline-block Elements

When people see that any website content is get ranked and earn traffic. They started copying their content, and create the replicated site to gain the attention of users. To protect your content disable text selection is the best option. If you have a CMS based website then you will find a lot of plugins. Usage of plugins are the negative signals for search engines, clear codes are positive signals. Instead of using the plugins I will recommend you to used the clear code to make your website optimized.

Did you know: HTML Redirect Code With Implementation

To disable text selection we will use the user-select property of CSS. If you will set this property to your website, then end user will not able to select the content. Most people recommend the JavaScript Code to disable text selection. You can use CSS code instead of JS. Because if a user will disable the JS in the browser then disable text functionality has died. Below is the CSS code for Disable text selection.

Disable text selection CSS Code

Did you know: How to Horizontally Center Div in another Div

Disable text selection HTML Code

Now it’s not easy for others to copy your content. There are several more reasons for which you needed this functionality. If you wanted to test this functionality, I have given the complete code below. You just have to test the code in your editor or save the code as HTML to test in browser.

Did you know: How To Change input placeholder color with CSS

In the above code, we have used the specific class, but if you wanted to apply this feature in your active website then you just have to replace the name of the class with aistarik to implement the feature in all the tags automatically.

If you found any kind of error in the above code, please let me know. If you know any better solution, you can suggest too. I hope this will solve your problem which you are looking for.

SHARE