- How to disable text selection in CSS
- How to disable text selection in CSS
- user-select set to none
- user-select set to all
- user-select set to text
- More Tips and Tricks for CSS
- Disable Text Selection Highlighting In HTML Using CSS
- Using user-select:none: #
- In Google Chrome: #
- In mozilla firefox: #
- In Safari: #
- In IOS Safari: #
- In Internet Explorer/Edge using: #
- What does user-select property will do? #
- user-select property values: #
- user-select none: #
- user-select text: #
- user-select all: #
- user-select auto: #
- user-select contain: #
- user-select CSS example: #
- user-select:none
- user-select:text
- user-select:all
- user-select:auto
- user-select:contain
- 👋 Stay in the loop
- How to disable text selection using CSS | user-select Property Definition, Syntax, Values | Steps to Disable Text Selection
- CSS user-select Property
- CSS Syntax
- user-select property values
- How to disable text selection using CSS
- Example on How to disable text selection highlighting in the browsers using CSS?
- Steps to Disable Text Selection In WebPage Using CSS
- Disable Text Selection In WebPage Using CSS
How to disable text selection in CSS
On a web page, we typically should not disable text selection, but there are a few cases where having it enabled can take away from the user experience. Normally, we do not want to take away a user’s ability to select text, as that will lead to a bad user experience. There was a time when a small number of websites would stop users copying article text as a method of stopping plagiarism, but thankfully that is far less common today.
Having said that, there are a notable number of examples where disabling text selection can actually improve user experience. For example:
- On HTML elements that trigger events, especially on mobile — where tapping or double tapping might lead to text selection
- On drag and drop interfaces, where a user has to drag an element — we don’t want that drag to trigger text selection too.
- On many other custom web-built user applications where text selection needs to be limited to certain elements or situations. For example, on a text editor, we usually don’t want the button that makes text bold to be selectable, since it is a button.
If you do decide to disable text selection, there is fortunately an easy way to accomplish this in CSS.
How to disable text selection in CSS
All modern browsers (with the exception of some versions of Safari) support the user-select property, which makes any HTML element unselectable. For example, if you wanted all buttons not be selectable, you could write the following:
button -webkit-user-select: none; user-select: none; >
We have to use -webkit-user-select since Safari still requires it. If you want to support Internet Explorer (which is becoming less and less common), you can also use -ms-user-select :
button -ms-user-select: none; -webkit-user-select: none; user-select: none; >
This single property will stop user selection. user-select also has other properties, in theory, but the support for these vary.
- user-select: none — no user select on the element.
- user-select: text — you can only select the text within the element
- user-select: all — tapping once will select the entire elements content.
- user-select: auto — the default, lets you select everything like normal.
To show you how each works, here are some examples. Note, both text and all have limited Safari support, so consider trying these out in Chrome.
user-select set to none
This is equivalent to user-select: none .
You won’t be able to select this text!
user-select set to all
This is equivalent to user-select: all .
Tapping once on this will lead to you selecting all of the text.
user-select set to text
This example does not differ too much from user-select: auto .
You will only be able to select the text in this element.
More Tips and Tricks for CSS
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 disabledText 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 disabledYou can select metext 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.
- 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
- Otherwise the default behavior is text. that is user can select the text.
- On pseudo elements ::before and ::after the behavior is none
- 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 disabledText selection is disabled in children element alsouser-select:text
text selection is disabledYou can select metext selection is disableduser-select:all
On click we can select the textuser-select:auto
text selection is disabledas parent element is none cannot select texttext selection is disabled
text selection is enabledas parent element is text,can select texttext selection is enabledas parent element is text,can select textuser-select:contain
text selection is containThis is not selectedAnd 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 using CSS | user-select Property Definition, Syntax, Values | Steps to Disable Text Selection
Texts are the most fundamental elements of any website or web page. In this tutorial, we have shared how to disable text selection highlighting using CSS? Along with the CSS user-select Property definition and usage, syntax, values, supported browsers, Steps to disable the text selection with CSS, and Example Codes on How to disable text selection highlighting using CSS?
CSS user-select Property
The user-select property defines whether the text of an element can be selected. In various web browsers, in case you double-click on some particular text it will be selected/highlighted. To be unselected or disabled, this property can be used.
Default value: auto Inherited: no Animatable: no. Version: CSS3 JavaScript syntax: object.style.userSelect=”none” CSS Syntax
user-select: auto|none|text|all;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 a particular element element IE version of user-select contain. How to disable text selection using CSS
By default browsers let us select the text in the browser using the keyboard, pressing the cmd-A combination on a Mac for example, or using the mouse.
How can you disable that, to make your web page behave more like an app and less like a document?
Use the user-select: none; CSS rule.
-webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;One thing I use sometimes is to make all the app interface unselectable applying user-select: none; on the body element, then I can re-enable it on specific elements, using:
Also, observe what statements that we can use for different browsers to disable a selectivity of text.
- Chrome, Opera: -webkit-user-select
- Safari: -webkit-touch-callout
- Mozilla: -moz-user-select
- Internet Explorer: -ms-user-select
Example on How to disable text selection highlighting in the browsers using CSS?
At present, browsers only assist a small subset of CSS properties for ::selection pseudo-element like color, background-color and text-shadow. Let’s see an example:
::selection < color: none; background: none; >/* For Mozilla Firefox */ ::-moz-selection
Steps to Disable Text Selection In WebPage Using CSS
There are two steps that should be followed to disable the text selection in webpage using CSS:
- Make a HTML file and determine markup for webpage
- Make a CSS file and specify styling to disable the text
Step 1: Make a HTML file and determine markup for webpage
Disable Text Selection In WebPage Using CSS
Select The Text In This Paragraph This Is Selectable Like Any Other Text
Try To Select This Text You Are Not Able To Select This Text In Modern Browsers
Step 2: Make a CSS file and specify styling to disable the text
In this step, we have used the user-select property to disable the text selection and also the cross-browser prefix to work in most of the browser and also with some old browsers.
body < background-color:#EB99FF; font-family:helvetica; text-align:center; margin:0px auto; padding:0px; >h1 < margin-top:100px; color:#424242; font-size:40px; >h1 p < margin:0px; font-size:18px; color:black; text-decoration:underline; >.select < font-size:30px; font-weight:bold; color:#4000FF; >.no_select