Read : 4 minutes. 30 November 2022
Tags: Website

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.

1<div>
2You can select this text.
3</div>
4<div class="disable-select">
5You cannot select this text,text selection is disabled
6</div>

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

1.disable-select {
2    user-select: none; /* supported by Chrome and Opera */
3   -webkit-user-select: none; /* Safari */
4   -khtml-user-select: none; /* Konqueror HTML */
5   -moz-user-select: none; /* Firefox */
6   -ms-user-select: none; /* Internet Explorer/Edge */
7}

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.

1 .disable-select{
2  user-select:none;
3}

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.

1 .disable-select{
2   -moz-user-select:none;
3}

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.

1 .disable-select{
2  -webkit-user-select:none;
3}

In IOS Safari

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

1 .disable-select{
2  -webkit-touch-callout:none;
3}

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.

1 .disable-select{
2   -ms-user-select:none;
3}

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 valuedescription
noneuser cannot select the text
textuser can select the text
alluser can select the text with one click
autouser-select value depend upon its parent user-select option
containselection will be bound to particular element
elementIE 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.

1<div style="user-select:none;border:1px solid">
2text selection is disabled 
3<div>Text selection is disabled in children element also</div>
4</div>

user-select text

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

1<div style="user-select: none; border: 1px solid;">
2text selection is disabled
3<div style="user-select: text;">You can select me</div>
4<div> text selection is disabled</div>
5</div>

user-select all

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

1<div style="user-select:all">
2On click we can select the text
3</div>

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.

 1<h3>user-select:none</h3>
 2<div class="text-selection-none">
 3text selection is disabled 
 4<div>Text selection is disabled in children element also</div>
 5</div>
 6
 7<h3>user-select:text</h3>
 8<div class="text-selection-none">
 9text selection is disabled
10<div class="text-selection-text">You can select me</div>
11<div> text selection is disabled</div>
12</div>
13
14<h3>user-select:all</h3>
15<div class="text-selection-all">
16  On click we can select the text
17</div>
18
19<h3>user-select:auto</h3>
20<div class="text-selection-none">
21text selection is disabled
22<div class="text-selection-auto">as parent element is none cannot select text</div>
23<div> text selection is disabled</div>
24<br/>
25
26<div class="text-selection-text">
27text selection is enabled
28<div class="text-selection-auto">as parent element is text,can select text</div>
29<div> text selection is enabled</div>
30
31<br/>
32
33<div class="before text-selection-auto">as parent element is text,can select text<br/></div>
34
35<h3>
36user-select:contain
37</h3>
38
39<div class="text-selection-contain">text selection is contain<br/></div>
40
41
42<div>This is not selected</div>

And the corresponding CSS values are

 1.text-selection-none{
 2user-select: none; /* supported by Chrome and Opera */
 3-webkit-user-select: none; /* Safari */
 4-khtml-user-select: none; /* Konqueror HTML */
 5-moz-user-select: none; /* Firefox */
 6-ms-user-select: none;
 7}
 8.text-selection-text{
 9user-select: text; /* supported by Chrome and Opera */
10-webkit-user-select: text; /* Safari */
11-khtml-user-select: text; /* Konqueror HTML */
12-moz-user-select: text; /* Firefox */
13-ms-user-select: text;
14}
15.text-selection-all{
16user-select: all; /* supported by Chrome and Opera */
17-webkit-user-select: all; /* Safari */
18-khtml-user-select: all; /* Konqueror HTML */
19-moz-user-select: all; /* Firefox */
20-ms-user-select: all;
21}
22.text-selection-auto{
23user-select: auto; /* supported by Chrome and Opera */
24-webkit-user-select: auto; /* Safari */
25-khtml-user-select: auto; /* Konqueror HTML */
26-moz-user-select: auto; /* Firefox */
27-ms-user-select: auto;
28}
29.text-selection-contain{
30user-select: contain; 
31-webkit-user-select: contain; 
32-khtml-user-select: contain; 
33-moz-user-select: contain; 
34-ms-user-select: element; /*Only IE supports user-select contain option*/
35}
36div.before::after {
37content: "hi";
38}

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.

credit : arungudelli

Disable Text Selection Highlighting In HTML Using CSS