By default, texts on any web page can be highlighted and copied. Disable the highlight function also disables someone to copy the texts in the document. Using CSS user select makes the texts unselectable.
If for some reasons, you do not want your texts inside the button or paragraph to highlighted. CSS user select style attribute might help you.
So how to disable text selection with CSS user select?
Learn how by watching this video or continue reading.
See more amazing CSS videos in youtube: Garnatti one
Target an element and add the following styles
-webkit-touch-callout: none;
-webkit-user-select:none;
-khtml-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none;
It is self-explanatory, add these styles disable the text selection.
Try to select the sentence demo below. This sentence was added with the CSS user select styles.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Notice that you cannot highlight the sentence above means the styles that added worked.
The-webkit-touch-callout attribute targets the ios safari browser, -webkit-user-select targets Chrome, Opera and Safari browsers, -khtml-user-select targets Konqueror, -moz-user-select targets Mozilla firefox and -ms-user-select:none targets internet explorer.
You can use this technique if you want to…
Prevent people from copying your content. Unfortunately, it can be useless if people inspect your code from the browser. They can just copy the content within the source code.
Do not want somebody to copy your contents? The better way is to disable the right-click mouse function.
