How To Disable Text Selection With CSS User Select

css user select

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 you can 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 that these styles disable the text selection.
Try to select the sentence demo below. The 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.

 

Prevent people from copying your content. Unfortunately, it is 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.

 

Hi, did you know that we have a youtube channel? It's called Garnatti one. Check it out!
I believe that education must be free to everyone. Feel free to share.

Leave a comment

Your email address will not be published. Required fields are marked *