How To Disable Text Selection With CSS User Select

Published on: October 8, 2016 Filed under: CSS, Web Design
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.

 

Tagged in


Related posts

Disable right click with javascript

Disable Right Click with Javascript

Disable right click to prevent end users the capabilities to inspect, print, or ... Read more

Leave a Reply

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