How To Disable Text Selection With CSS ?

When we visit a website in a browser, by default we can select the text of that website with a mouse or keyboard command.

Disable Text Selection In CSS

If you want to disable text selection in your website, then you can do this with the help of CSS.

For this we use user-select: none; CSS rule.

To disable text selection of any element in HTML document, we write the CSS code as given below:

-webkit-touch-callout: none;  /* Disable Android and iOS callouts*/
-webkit-user-select: none;  /* Chrome, Safari, and Opera */
-khtml-user-select: none;  /* KHTML browsers (e.g. Konqueror) */
-moz-user-select: none;  /* Mozilla Firefox */
-ms-user-select: none;  /* Internet Explorer */  code-box

If we want to disable all the text selection of the website then in the CSS code of the body element we use user-select: none;. 

Then if we want to enable text selection on a particular element, then we use user-select: text;

Important Things To Be Noted

• user-select is not a standard property of CSS but still using some prefixes we use it with almost all browsers.
• In the example above, we have not used the user-select: none; property, because there is no such CSS property exist according to web standards. But we can use it for different browsers by applying some prefixes.
• This is not a permanent solution to prevent text selection. Because the user can easily change or disable CSS using the browser's developer tool.
• The user-select property is not the standard property of CSS and Web. When we test our document with a CSS validator, then it gives us an error.

Summary

In this post we learn how to disable text selection with CSS. You try to make it yourself. I hope you make. If you face any problem, then comment and tell us. Keep visiting the blog to read more similar posts.