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


How To Disable Text Selection With CSS ?


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.

1 Comments

  1. I enjoyed reading your post. I will share it with my other friends as the information is really very useful. Keep sharing your excellent work. html tutorial in hindi

    ReplyDelete

Post a Comment

Previous Post Next Post