Html css disable select text

How to Disable Text Selection Highlighting Using CSS

Today it is widespread to copy a text from one site and post it on another like it is your own content. This is called plagiarism.

There are many code difs (also, see our Code Diff tool) and plagiarism tools across the Internet that show the stolen content. Also, text selection highlight is not desirable when designing a website.

In this snippet, we are going to show how to prevent content theft from your site disabling the text selection highlighting with CSS.

Create HTML

h2>user-select:none 
"disabled"> 
Lorem Ipsum is simply dummy text.
 

Add CSS

Now that we have created the HTML part, it is time to add a little CSS code to disable the text selection. The CSS user-select property comes to the rescue!

• Set the user-select to «none» to prevent the selection highlighting.
• Also, add -Webkit- and -Moz- vendor prefixes for Safari and Firefox browsers.

.disabled < user-select: none; -webkit-user-select: none; /*Safari*/ -moz-user-select: none; /*Firefox*/ >

Let’s bring the code parts together and see the result.

Example of disabling the text selection highlighting:

html> html> head> title>Title of the document title> style> .disabled style> head> body> h2>User-select:none h2> div class="disabled"> div> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. div> div> body> html>

Result of disabling text selection highlighting

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Источник

Disable Text Selection Highlighting In HTML Using CSS

We can use user-select property in CSS to disable text selection highlighting in HTML pages.It is not a standard feature, but available in all modern browsers except IE 9 & before.

Using user-select:none: #

To disable the text selection in HTML we need to give user-select property value as none. Go through the below example to understand if further.

 
You can select this text.
 
You cannot select this text,text selection is disabled
 

I have added disable-select class to the second div now we will add user-select css property

But we have to add browser specific prefix before the user-select option for safari,firefox and internet explorer or edge.

Chrome and opera supports non prefixed versions.

In Google Chrome: #

To disable text selection highlighting in Google Chrome browser using CSS just set -user-select CSS property to none.

And no prefix is required for Google Chrome and Opera Browsers.

In mozilla firefox: #

To disable text selection highlighting in mozilla firefox browser using CSS just set -moz-user-select CSS property to none.

And we need add -moz prefix before user-select property for mozilla firefox Browser.

In Safari: #

To disable text selection highlighting in Safari browser using CSS just set -webkit-user-select CSS property to none.

And we need add -webkit prefix before user-select property for Safari Browser.

In IOS Safari: #

To disable text selection highlighting in IOS Safari browser using CSS just set -webkit-touch-callout CSS property to none.

In Internet Explorer/Edge using: #

To disable text selection highlighting in Internet Explorer/Edge browser using CSS just set -ms-user-select CSS property to none.

And we need add -ms prefix before user-select property for Safari Browser.

What does user-select property will do? #

user-select css property controls whether a text in a HTML element can be selected or not. It is not a standard feature.

You can find more details about draft specification here

user-select property values: #

user-select value	description
none	user cannot select the text
text	user can select the text
all	user can select the text with one click
auto	user-select value depend upon its parent user-select option
contain	selection will be bound to particular element
element	IE version of user-select contain.

user-select none: #

As explained above, when we give user-select property value as none to an HTML element we cannot select the text inside the element including it’s children element.

 
text selection is disabled 
Text selection is disabled in children element also
 

user-select text: #

When you give user-select property as text, user can select the text.

 
text selection is disabled 
You can select me
 
text selection is disabled
 

user-select all: #

When we give user-select property as all. Text inside the element is automatically selected on context click.

 
On click we can select the text
 

user-select auto: #

user-select auto behavior depends upon its parent element’s computed value of user-select.

1. If the parent element’s computed value is none then it’s value is none. or if the computed value is all then it’s value is all. or if the value is text it’s value is text
2. Otherwise the default behavior is text. that is user can select the text.
3. On pseudo elements ::before and ::after the behavior is none
4. And if the element is an editable element i.e., text or textarea the computed value is contain or element (In IE)

user-select contain: #

user-select contain is not supported in other browsers except internet explorer. In IE we have to give user-select option as element instead of contain.

So what exactly this user-select contain will do?

When you give user-select as contain or element selection will be bound to that element and cannot be extended.

Go through the below demo to understand it further.

user-select CSS example: #

We will see all user-select options in one place.

user-select:none
 
text selection is disabled 
Text selection is disabled in children element also
 
 
user-select:text
 
text selection is disabled 
You can select me
 
text selection is disabled
 
 
user-select:all
 
On click we can select the text
 
user-select:auto
 
text selection is disabled 
as parent element is none cannot select text
 
text selection is disabled
 
 
text selection is enabled 
as parent element is text,can select text
 
text selection is enabled
 
as parent element is text,can select text
 
user-select:contain
 
text selection is contain
 
This is not selected

And the corresponding CSS values are

.text-selection-none < user-select: none; /* supported by Chrome and Opera */ -webkit-user-select: none; /* Safari */ -khtml-user-select: none; /* Konqueror HTML */ -moz-user-select: none; /* Firefox */ -ms-user-select: none; >.text-selection-text < user-select: text; /* supported by Chrome and Opera */ -webkit-user-select: text; /* Safari */ -khtml-user-select: text; /* Konqueror HTML */ -moz-user-select: text; /* Firefox */ -ms-user-select: text; >.text-selection-all < user-select: all; /* supported by Chrome and Opera */ -webkit-user-select: all; /* Safari */ -khtml-user-select: all; /* Konqueror HTML */ -moz-user-select: all; /* Firefox */ -ms-user-select: all; >.text-selection-auto < user-select: auto; /* supported by Chrome and Opera */ -webkit-user-select: auto; /* Safari */ -khtml-user-select: auto; /* Konqueror HTML */ -moz-user-select: auto; /* Firefox */ -ms-user-select: auto; >.text-selection-contain < user-select: contain; -webkit-user-select: contain; -khtml-user-select: contain; -moz-user-select: contain; -ms-user-select: element; /*Only IE supports user-select contain option*/ >div.before::after

As explained above user-select : contain option is only supported in IE, if you open the fiddle in IE, You can observe its behaviour the element selection cannot be extended beyond the element with class .text-selection-contain.

Don’t be a Stranger. Connect me at Social Networking Sites.

👋 Stay in the loop

Get a short & sweet tutorials delivered to your inbox every couple of days. No spam ever. Unsubscribe any time.

Источник

How to Disable Text Selection, Copy, Cut, Paste and Right-click on a Web Page

There can be some cases when preventing certain parts of your web page from being selected could be profitable.

Because disabled user-selection is very annoying, you had better not set it for your whole website. Instead, disable text selection for the parts or on the specific articles that you afraid might be stolen. Use it in situations where it will enhance the UX of your website.

No matter what is the reason for disabling user-selection on your website, if you have come to that step, this is the right place to learn how to that with CSS, Javascript and jQuery easily.

How to Disable Text Selection Highlighting with CSS

It’s not a difficult task to make a text unselectable. All you need to do is to disable the text selectivity for all the browsers that your webpage is likely to be loaded on.

Let’s see what extensions to use for different browsers to disable the selectivity of a text.

• Chrome, Opera (older versions), IOS Safari: -webkit-user-select
• Safari: -webkit-touch-callout
• Mozilla: -moz-user-select
• KHTML browsers (Konqueror): -khtml-user-select

Chrome starting from 54.0 version and Opera starting from 41.0 version support the user-select without the -webkit- prefix.

Example

html> html> head> title>Title of the document title> style> .unselectable < -webkit-user-select: none; -webkit-touch-callout: none; -moz-user-select: none; -ms-user-select: none; user-select: none; color: #cc0000; > style> head> body> p>I am a selectable text. You can select me. p> div class="unselectable">I am an unselectable text. My text selection is disabled. div> body> html>

Источник

How to Disable Text Selection, Copy, Cut, Paste and Right-click on a Web Page

There can be some cases when preventing certain parts of your web page from being selected could be profitable.

Because disabled user-selection is very annoying, you had better not set it for your whole website. Instead, disable text selection for the parts or on the specific articles that you afraid might be stolen. Use it in situations where it will enhance the UX of your website.

No matter what is the reason for disabling user-selection on your website, if you have come to that step, this is the right place to learn how to that with CSS, Javascript and jQuery easily.

How to Disable Text Selection Highlighting with CSS

It’s not a difficult task to make a text unselectable. All you need to do is to disable the text selectivity for all the browsers that your webpage is likely to be loaded on.

Let’s see what extensions to use for different browsers to disable the selectivity of a text.

• Chrome, Opera (older versions), IOS Safari: -webkit-user-select
• Safari: -webkit-touch-callout
• Mozilla: -moz-user-select
• KHTML browsers (Konqueror): -khtml-user-select

Chrome starting from 54.0 version and Opera starting from 41.0 version support the user-select without the -webkit- prefix.

Example

html> html> head> title>Title of the document title> style> .unselectable < -webkit-user-select: none; -webkit-touch-callout: none; -moz-user-select: none; -ms-user-select: none; user-select: none; color: #cc0000; > style> head> body> p>I am a selectable text. You can select me. p> div class="unselectable">I am an unselectable text. My text selection is disabled. div> body> html>

Источник