# How to disable text selection highlighting (ok)

## [How to disable text selection highlighting](https://stackoverflow.com/questions/826782/how-to-disable-text-selection-highlighting)

Đọc thêm: [How to Disable Text Selection, Copy, Cut, Paste and Right-click on a Web Page](https://www.w3docs.com/snippets/javascript/how-to-disable-text-selection-copy-cut-paste-and-right-click-on-a-web-page.html) có bên dưới

[Ask Question](https://stackoverflow.com/questions/ask)Asked 14 years, 2 months agoModified [7 months ago](https://stackoverflow.com/questions/826782/how-to-disable-text-selection-highlighting?lastactivity)Viewed 2.7m timesReport this ad6036

For anchors that act like buttons (for example, the buttons on the sidebar of this Stack Overflow page titled *Questions*, *Tags*, and *Users*) or tabs, is there a CSS standard way to disable the highlighting effect if the user accidentally selects the text?

I realize that this could be done with JavaScript and a little googling yielded the Mozilla-only `-moz-user-select` option.

Is there a standard-compliant way to accomplish this with CSS, and if not, what is the "best practice" approach?

* [css](https://stackoverflow.com/questions/tagged/css)
* [cross-browser](https://stackoverflow.com/questions/tagged/cross-browser)
* [highlight](https://stackoverflow.com/questions/tagged/highlight)
* [textselection](https://stackoverflow.com/questions/tagged/textselection)

[Share](https://stackoverflow.com/q/826782)Follow[edited Jul 24, 2022 at 23:50](https://stackoverflow.com/posts/826782/revisions)[![Mateen Ulhaq's user avatar](https://i.stack.imgur.com/RoPPo.jpg?s=64\&g=1)](https://stackoverflow.com/users/365102/mateen-ulhaq)[Mateen Ulhaq](https://stackoverflow.com/users/365102/mateen-ulhaq)24.1k1818 gold badges9999 silver badges132132 bronze badgesasked May 5, 2009 at 20:29anon

* 10can elements within the element witch has highlighting disabled, have highlighting enabled with in css in the style or class attribute? or in other words, are there other values for -webkit-user-select ect. other than just none? – user659576 [Mar 14, 2011 at 21:18](https://stackoverflow.com/questions/826782/how-to-disable-text-selection-highlighting#comment5982968_826782)
* 10Related: [stackoverflow.com/questions/16600479/…](http://stackoverflow.com/questions/16600479/how-do-you-override-moz-user-select-none-on-a-child-element) = how to allow only some of the child elements to be selected – [JK.](https://stackoverflow.com/users/325727/jk) [May 17, 2013 at 2:36](https://stackoverflow.com/questions/826782/how-to-disable-text-selection-highlighting#comment23861962_826782) 
* 13There a bug in some browsers where doing "Select All" (CTRL+A and CMD+A) still selects things. This can be fought with a transparent selection color: `::selection { background: transparent; } ::-moz-selection { background: transparent; }` – [DaAwesomeP](https://stackoverflow.com/users/2852590/daawesomep) [Dec 12, 2014 at 1:03](https://stackoverflow.com/questions/826782/how-to-disable-text-selection-highlighting#comment43311452_826782) 
* 3In year 2017, it is better way to use `postcss` and `autoprefixer` and set browser version, then `postcss` make everything cool. – [AmerllicA](https://stackoverflow.com/users/6877799/amerllica) [Dec 6, 2017 at 11:47](https://stackoverflow.com/questions/826782/how-to-disable-text-selection-highlighting#comment82305878_826782)
* 1The user interface changed. In 2019, all three mentioned items are now in a hamburger menu in the upper left. *"Tags"* and *"Users"* are in there, and "Questions" is now called "Stack Overflow" (with an icon in front). – [Peter Mortensen](https://stackoverflow.com/users/63550/peter-mortensen) [Nov 24, 2019 at 12:23](https://stackoverflow.com/questions/826782/how-to-disable-text-selection-highlighting#comment104281429_826782) 

[Show 1 more comment](https://stackoverflow.com/questions/826782/how-to-disable-text-selection-highlighting)

### 45 Answers

Sorted by:                                              Highest score (default)                                                                   Trending (recent votes count more)                                                                   Date modified (newest first)                                                                   Date created (oldest first)                              1[2](https://stackoverflow.com/questions/826782/how-to-disable-text-selection-highlighting?page=2\&tab=scoredesc#tab-top)[Next](https://stackoverflow.com/questions/826782/how-to-disable-text-selection-highlighting?page=2\&tab=scoredesc#tab-top)8508+50

**UPDATE January, 2017:**

According to [Can I use](http://caniuse.com/#feat=user-select-none), the `user-select` + **`-webkit-user-select` for Safari** is enough to achieve desired behavior in all major browsers.

***

These are all of the available correct CSS variations:

```css
.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}
```

```xml
<p>
  Selectable text.
</p>
<p class="noselect">
  Unselectable text.
</p>
```

&#x20;Run code snippetExpand snippet

***

Note that `user-select` is in standardization process (currently in a [W3C working draft](https://drafts.csswg.org/css-ui-4/#propdef-user-select)). It is not guaranteed to work everywhere and there might be differences in implementation among browsers. Also, browsers can drop support for it in the future.

***

More information can be found in [Mozilla Developer Network documentation](https://developer.mozilla.org/en-US/docs/Web/CSS/user-select).

The values of this attribute are `none`, `text`, `toggle`, `element`, `elements`, `all` and `inherit`.

[Share](https://stackoverflow.com/a/4407335)Follow[edited Aug 18, 2022 at 9:38](https://stackoverflow.com/posts/4407335/revisions)community wiki\
[39 revs, 24 users 20%<br>](https://stackoverflow.com/posts/4407335/revisions)[Blowsie](https://stackoverflow.com/users/370286)

* 42nice code molokoloco :D , although I personally would stay well away from using it, as sometimes you may need the values different for different browsers, and it relys on JavaScript. Making a class and adding it to your element or applying the css to your type of element in your style-sheet is pretty bullet proof. – [Blowsie](https://stackoverflow.com/users/370286/blowsie) [Jan 14, 2011 at 13:07](https://stackoverflow.com/questions/826782/how-to-disable-text-selection-highlighting#comment5174691_4407335)&#x20;
* 67'user-select'- Values: none | text | toggle | element | elements | all | inherit - [w3.org/TR/2000/WD-css3-userint-20000216](http://www.w3.org/TR/2000/WD-css3-userint-20000216) – [Blowsie](https://stackoverflow.com/users/370286/blowsie) [Mar 21, 2011 at 9:44](https://stackoverflow.com/questions/826782/how-to-disable-text-selection-highlighting#comment6076554_4407335)
* 367this is ridiculous! so many different ways to do the same thing. let's make a new standard for user selects. we will call it `standard-user-select`. then we won't have these problems. although for backwards compatibility we should include the others as well. so now the code becomes `-webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; standard-user-select: none;`. ah, much better. – [Claudiu](https://stackoverflow.com/users/15055/claudiu) [Sep 4, 2012 at 16:19](https://stackoverflow.com/questions/826782/how-to-disable-text-selection-highlighting#comment16448998_4407335)&#x20;
* 5According to caniuse it seems that it doesn't need those prefixes anymore. – [aderchox](https://stackoverflow.com/users/9868445/aderchox) [Jul 16, 2021 at 11:16](https://stackoverflow.com/questions/826782/how-to-disable-text-selection-highlighting#comment120897906_4407335)
* 3\@aderchox In that case, caniuse.com is wrong. I still need the `-webkit-user-select: none;` line using Safari on iOS 15.1. – [Tamás Sengel](https://stackoverflow.com/users/3151675/tam%C3%A1s-sengel) [Oct 30, 2021 at 7:55](https://stackoverflow.com/questions/826782/how-to-disable-text-selection-highlighting#comment123340933_4407335)

[Show 3 more comments](https://stackoverflow.com/questions/826782/how-to-disable-text-selection-highlighting)951+50

In most browsers, this can be achieved using proprietary variations on the CSS `user-select` property, [originally proposed and then abandoned in CSS 3](http://www.w3.org/TR/2000/WD-css3-userint-20000216#user-select) and now proposed in [CSS UI Level 4](https://drafts.csswg.org/css-ui-4/#content-selection):

```css
*.unselectable {
   -moz-user-select: none;
   -khtml-user-select: none;
   -webkit-user-select: none;

   /*
     Introduced in Internet Explorer 10.
     See http://ie.microsoft.com/testdrive/HTML5/msUserSelect/
   */
   -ms-user-select: none;
   user-select: none;
}
```

For Internet Explorer < 10 and [Opera](http://en.wikipedia.org/wiki/Opera_\(web_browser\)) < 15, you will need to use the `unselectable` attribute of the element you wish to be unselectable. You can set this using an attribute in HTML:

```bash
<div id="foo" unselectable="on" class="unselectable">...</div>
```

Sadly this property isn't inherited, meaning you have to put an attribute in the start tag of every element inside the `<div>`. If this is a problem, you could instead use JavaScript to do this recursively for an element's descendants:

```javascript
function makeUnselectable(node) {
    if (node.nodeType == 1) {
        node.setAttribute("unselectable", "on");
    }
    var child = node.firstChild;
    while (child) {
        makeUnselectable(child);
        child = child.nextSibling;
    }
}

makeUnselectable(document.getElementById("foo"));
```

***

**Update 30 April 2014**: This tree traversal needs to be rerun whenever a new element is added to the tree, but it seems from a comment by @Han that it is possible to avoid this by adding a `mousedown` event handler that sets `unselectable` on the target of the event. See <http://jsbin.com/yagekiji/1> for details.

***

This still doesn't cover all possibilities. While it is impossible to initiate selections in unselectable elements, in some browsers (Internet Explorer and Firefox, for example) it's still impossible to prevent selections that start before and end after the unselectable element without making the whole document unselectable.

[Share](https://stackoverflow.com/a/4358620)Follow[edited Nov 24, 2019 at 12:36](https://stackoverflow.com/posts/4358620/revisions)[![Peter Mortensen's user avatar](https://i.stack.imgur.com/RIZKi.png?s=64\&g=1)](https://stackoverflow.com/users/63550/peter-mortensen)[Peter Mortensen](https://stackoverflow.com/users/63550/peter-mortensen)30.8k2121 gold badges105105 silver badges131131 bronze badgesanswered Dec 5, 2010 at 11:45[![Tim Down's user avatar](https://www.gravatar.com/avatar/f7b22b86b0da570ddb5d1d4923b0f4f4?s=64\&d=identicon\&r=PG)](https://stackoverflow.com/users/96100/tim-down)[Tim Down](https://stackoverflow.com/users/96100/tim-down)317k7575 gold badges453453 silver badges534534 bronze badges

* 34you should remove the \* selector from your example, its really in-efficient and there really isnt any need to use it in your example is there? – [Blowsie](https://stackoverflow.com/users/370286/blowsie) [Jan 14, 2011 at 13:15](https://stackoverflow.com/questions/826782/how-to-disable-text-selection-highlighting#comment5174816_4358620)
* 71\@Blowsie: I don't think so: the CSS 2 spec states that `*.foo` and `.foo` are precisely equivalent (in the second case, the universal selector (`*`) is implied), so barring browser quirks, I can't see that including the `*` will harm performance. It's a long-standing habit of mine to include the `*`, which I originally started doing for readability: it explicitly states at a glance that the author intends to match all elements. – [Tim Down](https://stackoverflow.com/users/96100/tim-down) [Jan 14, 2011 at 13:24](https://stackoverflow.com/questions/826782/how-to-disable-text-selection-highlighting#comment5174919_4358620)&#x20;
* 40oooh after some further reading, it seems \* is only un-effiecient when using it as the key (the righmost selector) ie .unselectable \* . Further info here [code.google.com/speed/page-speed/docs/…](http://code.google.com/speed/page-speed/docs/rendering.html#UseEfficientCSSSelectors) – [Blowsie](https://stackoverflow.com/users/370286/blowsie) [Jan 14, 2011 at 13:49](https://stackoverflow.com/questions/826782/how-to-disable-text-selection-highlighting#comment5175193_4358620)&#x20;
* 22Instead of using the class="unselectable", just use the attribute selector \[unselectable="on"] { … } – [Chris Calo](https://stackoverflow.com/users/101869/chris-calo) [Jan 26, 2012 at 19:39](https://stackoverflow.com/questions/826782/how-to-disable-text-selection-highlighting#comment11316143_4358620)

[Add a comment](https://stackoverflow.com/questions/826782/how-to-disable-text-selection-highlighting)233

Until CSS 3's [user-select](http://www.w3.org/TR/1999/WD-css3-userint-19990916#user-select) property becomes available, [Gecko](http://en.wikipedia.org/wiki/Gecko_\(layout_engine\))-based browsers support the `-moz-user-select` property you already found. [WebKit](https://en.wikipedia.org/wiki/WebKit) and Blink-based browsers support the `-webkit-user-select` property.

This of course is not supported in browsers that do not use the Gecko rendering engine.

There is no "standards" compliant quick-and-easy way to do it; using JavaScript is an option.

The real question is, why do you want users to not be able to highlight and presumably copy and paste certain elements? I have not come across a single time that I wanted to not let users highlight a certain portion of my website. Several of my friends, after spending many hours reading and writing code will use the highlight feature as a way to remember where on the page they were, or providing a marker so that their eyes know where to look next.

The only place I could see this being useful is if you have buttons for forms that should not be copy and pasted if a user copy and pasted the website.

[Share](https://stackoverflow.com/a/826813)Follow[edited Apr 17, 2016 at 5:17](https://stackoverflow.com/posts/826813/revisions)[![Peter Mortensen's user avatar](https://i.stack.imgur.com/RIZKi.png?s=64\&g=1)](https://stackoverflow.com/users/63550/peter-mortensen)[Peter Mortensen](https://stackoverflow.com/users/63550/peter-mortensen)30.8k2121 gold badges105105 silver badges131131 bronze badgesanswered May 5, 2009 at 20:37[![X-Istence's user avatar](https://www.gravatar.com/avatar/9de7d27799eccd891d898b9b2b3c2949?s=64\&d=identicon\&r=PG)](https://stackoverflow.com/users/13986/x-istence)[X-Istence](https://stackoverflow.com/users/13986/x-istence)16.3k66 gold badges5757 silver badges7474 bronze badges

* This may be necessary for embedded devices. i.e. a device where a browser is used for rendering the UI. – [Tim Kersten](https://stackoverflow.com/users/33514/tim-kersten) [Nov 4, 2009 at 12:05](https://stackoverflow.com/questions/826782/how-to-disable-text-selection-highlighting#comment1546709_826813)
* 35Another reason this is needed is Shift-clicking to select multiple rows in a grid or table. You don't want to to highlight the text, you want it to select the rows. – [Gordon Tucker](https://stackoverflow.com/users/174469/gordon-tucker) [Jan 6, 2010 at 16:08](https://stackoverflow.com/questions/826782/how-to-disable-text-selection-highlighting#comment1935328_826813)
* 37Highly interactive web app with a lot of drag & drop... accidental highlighting is a big usability problem. – [Marc Hughes](https://stackoverflow.com/users/6791/marc-hughes) [Jun 3, 2014 at 21:08](https://stackoverflow.com/questions/826782/how-to-disable-text-selection-highlighting#comment37033715_826813)&#x20;

[Add a comment](https://stackoverflow.com/questions/826782/how-to-disable-text-selection-highlighting)Report this ad207

A JavaScript solution for Internet Explorer is:

```ini
onselectstart="return false;"
```

[Share](https://stackoverflow.com/a/1730172)Follow[edited Jul 31, 2019 at 19:30](https://stackoverflow.com/posts/1730172/revisions)[![Peter Mortensen's user avatar](https://i.stack.imgur.com/RIZKi.png?s=64\&g=1)](https://stackoverflow.com/users/63550/peter-mortensen)[Peter Mortensen](https://stackoverflow.com/users/63550/peter-mortensen)30.8k2121 gold badges105105 silver badges131131 bronze badgesanswered Nov 13, 2009 at 16:05[![Pekka's user avatar](https://i.stack.imgur.com/zzxoB.jpg?s=64\&g=1)](https://stackoverflow.com/users/187606/pekka)[Pekka](https://stackoverflow.com/users/187606/pekka)441k142142 gold badges972972 silver badges10861086 bronze badges

* 61Don’t forget about `ondragstart`! – [Mathias Bynens](https://stackoverflow.com/users/96656/mathias-bynens) [May 26, 2010 at 13:25](https://stackoverflow.com/questions/826782/how-to-disable-text-selection-highlighting#comment2964449_1730172)

[Add a comment](https://stackoverflow.com/questions/826782/how-to-disable-text-selection-highlighting)156

If you want to disable text selection on everything except on `<p>` elements, you can do this in CSS (watch out for the `-moz-none` which allows override in sub-elements, which is allowed in other browsers with `none`):

```css
* {
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: -moz-none;
    -o-user-select: none;
    user-select: none;
}

p {
    -webkit-user-select: text;
    -khtml-user-select: text;
    -moz-user-select: text;
    -o-user-select: text;
    user-select: text;
}
```

[Share](https://stackoverflow.com/a/6117092)Follow[edited Oct 29, 2013 at 17:09](https://stackoverflow.com/posts/6117092/revisions)[![James Donnelly's user avatar](https://i.stack.imgur.com/1XNRN.jpg?s=64\&g=1)](https://stackoverflow.com/users/1317805/james-donnelly)[James Donnelly](https://stackoverflow.com/users/1317805/james-donnelly)126k3434 gold badges208208 silver badges218218 bronze badgesanswered May 24, 2011 at 21:24[![Benjamin Crouzier's user avatar](https://i.stack.imgur.com/oZR4v.jpg?s=64\&g=1)](https://stackoverflow.com/users/311744/benjamin-crouzier)[Benjamin Crouzier](https://stackoverflow.com/users/311744/benjamin-crouzier)40.1k4444 gold badges169169 silver badges234234 bronze badges

* 13Make sure you also make input fields selectable: `p, input { -webkit-user-select: text; -khtml-user-select: text; -moz-user-select: text; -o-user-select: text; user-select: text; }` – [joshuadelange](https://stackoverflow.com/users/163368/joshuadelange) [Jul 7, 2011 at 22:39](https://stackoverflow.com/questions/826782/how-to-disable-text-selection-highlighting#comment7812803_6117092)&#x20;
* 12Be very wary about turning off browser UI expectations on ALL code except for one item. What about list items \<li /> text, for example? – [Jason](https://stackoverflow.com/users/641553/jason) [Nov 12, 2011 at 7:13](https://stackoverflow.com/questions/826782/how-to-disable-text-selection-highlighting#comment9935296_6117092)
* Just an update... according to MDN since Firefox 21 `-moz-none` and `none` are the same. – [Kevin Fegan](https://stackoverflow.com/users/606539/kevin-fegan) [Dec 25, 2013 at 15:56](https://stackoverflow.com/questions/826782/how-to-disable-text-selection-highlighting#comment31137739_6117092)
* 2For this you may add cursor:default and cursor:text respectively : ) – [T4NK3R](https://stackoverflow.com/users/159189/t4nk3r) [Jul 14, 2014 at 17:14](https://stackoverflow.com/questions/826782/how-to-disable-text-selection-highlighting#comment38383584_6117092)
* *THE* bomb. That is to say. THE END. `ul>* { -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: -moz-none; -o-user-select: none; user-select: none; }` \[selects everything in an unordered list, and makes it un-selectable, rather than trashing the whole view tree.] Thanks for the lesson. My button list is looking great, and responding correctly to screen tapping and pressing, rather than launching an IME (android clipboard widgets). – [Hypersoft Systems](https://stackoverflow.com/users/3370790/hypersoft-systems) [Sep 12, 2019 at 6:54](https://stackoverflow.com/questions/826782/how-to-disable-text-selection-highlighting#comment102222869_6117092)&#x20;

[Add a comment](https://stackoverflow.com/questions/826782/how-to-disable-text-selection-highlighting)138

In the solutions in previous answers selection is stopped, but the user still thinks you can select text because the cursor still changes. To keep it static, you'll have to set your CSS cursor:

```css
.noselect {
    cursor: default;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
```

```xml
<p>
  Selectable text.
</p>
<p class="noselect">
  Unselectable text.
</p>
```

&#x20;Run code snippetExpand snippet

This will make your text totally flat, like it would be in a desktop application.

[Share](https://stackoverflow.com/a/32299832)Follow[edited Nov 2, 2019 at 14:23](https://stackoverflow.com/posts/32299832/revisions)[![Peter Mortensen's user avatar](https://i.stack.imgur.com/RIZKi.png?s=64\&g=1)](https://stackoverflow.com/users/63550/peter-mortensen)[Peter Mortensen](https://stackoverflow.com/users/63550/peter-mortensen)30.8k2121 gold badges105105 silver badges131131 bronze badgesanswered Aug 30, 2015 at 18:32[![ZECTBynmo's user avatar](https://www.gravatar.com/avatar/8c758b186ab9e7358188ef30672ce84e?s=64\&d=identicon\&r=PG)](https://stackoverflow.com/users/758061/zectbynmo)[ZECTBynmo](https://stackoverflow.com/users/758061/zectbynmo)3,18733 gold badges2525 silver badges4141 bronze badges

* "Flat" as opposed to what? – [kojow7](https://stackoverflow.com/users/4698242/kojow7) [Feb 9, 2018 at 20:55](https://stackoverflow.com/questions/826782/how-to-disable-text-selection-highlighting#comment84426977_32299832)
* @kojow7 As opposed to "layered". Instead of text floating on top of the other elements. It is similar to the difference between SVG and PNG images. – [Yeti](https://stackoverflow.com/users/1009901/yeti) [Sep 19, 2018 at 9:35](https://stackoverflow.com/questions/826782/how-to-disable-text-selection-highlighting#comment91749097_32299832)&#x20;
* 4Was surprised to discover that Firefox still requires the vendor prefix in 2019. I disregardfully used only `user-select: none;`, thinking the standard would be adopted by now, but sadly it has not. Makes you wonder what the people on the standards committee could still be debating. "No, you guys... I *really* think it should be `user-select: cant;` because it's like more descriptive, you know?" "We've been over this, Mike. We would have to omit the apostrophe, and that's bad form!" "Enough, everyone! We will deliberate on this matter again next month. Standards Committee meeting adjourned!" – [Mentalist](https://stackoverflow.com/users/2454914/mentalist) [May 24, 2019 at 3:19](https://stackoverflow.com/questions/826782/how-to-disable-text-selection-highlighting#comment99184176_32299832)

[Add a comment](https://stackoverflow.com/questions/826782/how-to-disable-text-selection-highlighting)120

You can do so in Firefox and Safari (Chrome also?)

```css
::selection { background: transparent; }
::-moz-selection { background: transparent; }
```

[Share](https://stackoverflow.com/a/826849)Follow[edited Oct 29, 2013 at 17:09](https://stackoverflow.com/posts/826849/revisions)[![James Donnelly's user avatar](https://i.stack.imgur.com/1XNRN.jpg?s=64\&g=1)](https://stackoverflow.com/users/1317805/james-donnelly)[James Donnelly](https://stackoverflow.com/users/1317805/james-donnelly)126k3434 gold badges208208 silver badges218218 bronze badgesanswered May 5, 2009 at 20:46[![seanmonstar's user avatar](https://www.gravatar.com/avatar/dfb248d98bc7c238fccd5aad53624eab?s=64\&d=identicon\&r=PG)](https://stackoverflow.com/users/101059/seanmonstar)[seanmonstar](https://stackoverflow.com/users/101059/seanmonstar)11.3k22 gold badges2121 silver badges2626 bronze badges

* 131I wouldn't recommend doing this, because it doesn't actually fix the issue; disabling text selection - it merely hides it. This can lead to bad usability, because if I drag my cursor around the page I could be selecting any arbitrary text without knowing it. This can cause all kinds of weird usability "bugs". – [Keithamus](https://stackoverflow.com/users/343152/keithamus) [Feb 2, 2011 at 15:01](https://stackoverflow.com/questions/826782/how-to-disable-text-selection-highlighting#comment5421639_826849)
* 2Doesn't work on PNG-images with transparent areas: The will always select in a light blue… Any workaround? – [AvL](https://stackoverflow.com/users/1106393/avl) [Sep 18, 2013 at 21:12](https://stackoverflow.com/questions/826782/how-to-disable-text-selection-highlighting#comment27868847_826849)

[Add a comment](https://stackoverflow.com/questions/826782/how-to-disable-text-selection-highlighting)90

Workaround for [WebKit](http://en.wikipedia.org/wiki/WebKit):

```css
/* Disable tap highlighting */
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
```

I found it in a CardFlip example.

[Share](https://stackoverflow.com/a/7495877)Follow[edited Nov 24, 2019 at 12:47](https://stackoverflow.com/posts/7495877/revisions)[![Peter Mortensen's user avatar](https://i.stack.imgur.com/RIZKi.png?s=64\&g=1)](https://stackoverflow.com/users/63550/peter-mortensen)[Peter Mortensen](https://stackoverflow.com/users/63550/peter-mortensen)30.8k2121 gold badges105105 silver badges131131 bronze badgesanswered Sep 21, 2011 at 7:09[![Alex's user avatar](https://www.gravatar.com/avatar/59bd425baf888c9a5fdeae62ac3b3582?s=64\&d=identicon\&r=PG)](https://stackoverflow.com/users/885686/alex)[Alex](https://stackoverflow.com/users/885686/alex)91966 silver badges33 bronze badges

* 1Using `transparent` in lieu of rgba also works in Chrome 42 on Android. – [Clint Pachl](https://stackoverflow.com/users/41906/clint-pachl) [Apr 29, 2015 at 20:46](https://stackoverflow.com/questions/826782/how-to-disable-text-selection-highlighting#comment48029131_7495877)

[Add a comment](https://stackoverflow.com/questions/826782/how-to-disable-text-selection-highlighting)86

I like the hybrid CSS + jQuery solution.

To make all elements inside `<div class="draggable"></div>` unselectable, use this CSS:

```css
.draggable {
    -webkit-user-select: none;
     -khtml-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
         -o-user-select: none;
            user-select: none;
}

.draggable input {
    -webkit-user-select: text;
     -khtml-user-select: text;
       -moz-user-select: text;
         -o-user-select: text;
            user-select: text;
 }
```

And then, if you're using jQuery, add this inside a `$(document).ready()` block:

```javascript
if (($.browser.msie && $.browser.version < 10) || $.browser.opera) $('.draggable').find(':not(input)').attr('unselectable', 'on');
```

I figure you still want any input elements to be interactable, hence the `:not()` pseudo-selector. You could use `'*'` instead if you don't care.

Caveat: Internet Explorer 9 may not need this extra jQuery piece, so you may want to add a version check in there.

[Share](https://stackoverflow.com/a/8099186)Follow[edited Apr 15, 2020 at 20:54](https://stackoverflow.com/posts/8099186/revisions)[![johannchopin's user avatar](https://i.stack.imgur.com/4iGwt.jpg?s=64\&g=1)](https://stackoverflow.com/users/8583669/johannchopin)[johannchopin](https://stackoverflow.com/users/8583669/johannchopin)13.6k1010 gold badges5454 silver badges100100 bronze badgesanswered Nov 11, 2011 at 19:53[![Tom Auger's user avatar](https://www.gravatar.com/avatar/9e065f079b7a26c417d850dfe762a9f7?s=64\&d=identicon\&r=PG)](https://stackoverflow.com/users/467386/tom-auger)[Tom Auger](https://stackoverflow.com/users/467386/tom-auger)19.4k2222 gold badges8181 silver badges104104 bronze badges

* 6Use -ms-user-select: none; (for IE10) and your jQuery "if" should be this: if (($.browser.msie && $.browser.version < 10) || $.browser.opera) – [mhenry1384](https://stackoverflow.com/users/24267/mhenry1384) [Jan 31, 2013 at 3:42](https://stackoverflow.com/questions/826782/how-to-disable-text-selection-highlighting#comment20414414_8099186)
* Be careful man !!! To make it selectable in firefox you must use `-moz-user-select: Normal;` – [Nicolas Thery](https://stackoverflow.com/users/903840/nicolas-thery) [Mar 10, 2013 at 16:53](https://stackoverflow.com/questions/826782/how-to-disable-text-selection-highlighting#comment21638464_8099186)
* 8\@mhenry1384 `jQuery.browser` has been deprecated as of version 1.3 and has been removed in version 1.9 - [api.jquery.com/jQuery.browser](http://api.jquery.com/jQuery.browser) – [WynandB](https://stackoverflow.com/users/192886/wynandb) [Mar 14, 2013 at 23:58](https://stackoverflow.com/questions/826782/how-to-disable-text-selection-highlighting#comment21810121_8099186)
* @Wynand Good point. But what sort of "feature detection" exists to determine which CSS property to use? – [Tom Auger](https://stackoverflow.com/users/467386/tom-auger) [Mar 15, 2013 at 13:28](https://stackoverflow.com/questions/826782/how-to-disable-text-selection-highlighting#comment21829559_8099186)
* @TomAuger You could use jQuery.support, it allows you to check for single features : [Link](http://api.jquery.com/jQuery.support/) – [Aequanox](https://stackoverflow.com/users/2167128/aequanox) [Mar 28, 2013 at 10:10](https://stackoverflow.com/questions/826782/how-to-disable-text-selection-highlighting#comment22257946_8099186)

[Show 2 more comments](https://stackoverflow.com/questions/826782/how-to-disable-text-selection-highlighting)79

You can use **CSS** or **JavaScript** for that.

The **JavaScript** way is supported in *older* browsers, like *old* versions of Internet Explorer as well, but if it's not your case, use the CSS way then:

**HTML/JavaScript:**

```xml
<html onselectstart='return false;'>
  <body>
    <h1>This is the Heading!</h1>
    <p>And I'm the text, I won't be selected if you select me.</p>
  </body>
</html>
```

&#x20;Run code snippetHide resultsFull page

**HTML/CSS:**

```css
.not-selectable {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
```

```xml
<body class="not-selectable">
  <h1>This is the Heading!</h1>
  <p>And I'm the text, I won't be selected if you select me.</p>
</body>
```

&#x20;Run code snippetHide resultsFull page[Share](https://stackoverflow.com/a/44370796)Follow[edited Nov 24, 2019 at 14:04](https://stackoverflow.com/posts/44370796/revisions)[![Peter Mortensen's user avatar](https://i.stack.imgur.com/RIZKi.png?s=64\&g=1)](https://stackoverflow.com/users/63550/peter-mortensen)[Peter Mortensen](https://stackoverflow.com/users/63550/peter-mortensen)30.8k2121 gold badges105105 silver badges131131 bronze badgesanswered Jun 5, 2017 at 14:03[![Alireza's user avatar](https://i.stack.imgur.com/WtfBG.png?s=64\&g=1)](https://stackoverflow.com/users/5423108/alireza)[Alireza](https://stackoverflow.com/users/5423108/alireza)99.7k2727 gold badges266266 silver badges171171 bronze badges[Add a comment](https://stackoverflow.com/questions/826782/how-to-disable-text-selection-highlighting)78

```css
.hidden:after {
    content: attr(data-txt);
}
```

```xml
<p class="hidden" data-txt="Some text you don't want to be selected"></p>
```

&#x20;Run code snippetExpand snippet

It's not the best way, though.

[Share](https://stackoverflow.com/a/16317405)Follow[edited Jun 16, 2017 at 2:37](https://stackoverflow.com/posts/16317405/revisions)[![Fred Gandt's user avatar](https://www.gravatar.com/avatar/d1c4a001ac1d10e8b7fa6238b7122073?s=64\&d=identicon\&r=PG)](https://stackoverflow.com/users/1832568/fred-gandt)[Fred Gandt](https://stackoverflow.com/users/1832568/fred-gandt)4,20722 gold badges3333 silver badges4141 bronze badgesanswered May 1, 2013 at 11:36[![Ale's user avatar](https://i.stack.imgur.com/jJEZg.png?s=64\&g=1)](https://stackoverflow.com/users/1593459/ale)[Ale](https://stackoverflow.com/users/1593459/ale)1,9981919 silver badges3131 bronze badges

* 3You could also use `title` as the attribute. – [Toothbrush](https://stackoverflow.com/users/3210837/toothbrush) [May 7, 2014 at 16:50](https://stackoverflow.com/questions/826782/how-to-disable-text-selection-highlighting#comment36083200_16317405)&#x20;
* 7That is a very creative solution. Especially if it used the title attribute because that would probably be better for screen readers. – [pseudosavant](https://stackoverflow.com/users/1152664/pseudosavant) [Sep 16, 2014 at 21:49](https://stackoverflow.com/questions/826782/how-to-disable-text-selection-highlighting#comment40499883_16317405)
* 4I tried it ([JSBin](http://jsbin.com/fawip/1/edit?html,css,output)) and it doesn't work in IE. Unfortunately older IEs are the only ones that `user-select` doesn't work for. – [pseudosavant](https://stackoverflow.com/users/1152664/pseudosavant) [Sep 16, 2014 at 21:58](https://stackoverflow.com/questions/826782/how-to-disable-text-selection-highlighting#comment40500081_16317405)&#x20;
* 1This is a great non-JS alternative that works in Chrome! Awesome! – [saricden](https://stackoverflow.com/users/1705378/saricden) [Nov 6, 2018 at 15:05](https://stackoverflow.com/questions/826782/how-to-disable-text-selection-highlighting#comment93238903_16317405)
* This was what I needed to prevent actual selection rather than just preventing the display of selection. – [SunshinyDoyle](https://stackoverflow.com/users/2258390/sunshinydoyle) [Sep 16, 2021 at 21:12](https://stackoverflow.com/questions/826782/how-to-disable-text-selection-highlighting#comment122335155_16317405)

[Add a comment](https://stackoverflow.com/questions/826782/how-to-disable-text-selection-highlighting)66

For Internet Explorer in addition, you need to add **pseudo class `focus`** (.ClassName:focus) and `outline-style: none`.

```css
.ClassName,
.ClassName:focus {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    outline-style: none; /* Internet Explorer  */
}
```

[Share](https://stackoverflow.com/a/20745177)Follow[edited Nov 24, 2019 at 13:22](https://stackoverflow.com/posts/20745177/revisions)[![Peter Mortensen's user avatar](https://i.stack.imgur.com/RIZKi.png?s=64\&g=1)](https://stackoverflow.com/users/63550/peter-mortensen)[Peter Mortensen](https://stackoverflow.com/users/63550/peter-mortensen)30.8k2121 gold badges105105 silver badges131131 bronze badgesanswered Dec 23, 2013 at 14:05[![Elad Shechter's user avatar](https://i.stack.imgur.com/INAKe.jpg?s=64\&g=1)](https://stackoverflow.com/users/2413332/elad-shechter)[Elad Shechter](https://stackoverflow.com/users/2413332/elad-shechter)3,88511 gold badge2222 silver badges2222 bronze badges

* 3This does work in IE so long as the selection starts on an element with the `className` class. See this [JSBin](http://jsbin.com/careye/1/edit?html,css,output). – [pseudosavant](https://stackoverflow.com/users/1152664/pseudosavant) [Sep 16, 2014 at 22:01](https://stackoverflow.com/questions/826782/how-to-disable-text-selection-highlighting#comment40500150_20745177)&#x20;

[Add a comment](https://stackoverflow.com/questions/826782/how-to-disable-text-selection-highlighting)62

Try to insert these rows into the CSS and call the "disHighlight" at class property:

```css
.disHighlight {
    user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    -webkit-touch-callout: none;
    -o-user-select: none;
    -moz-user-select: none;
}
```

[Share](https://stackoverflow.com/a/39188849)Follow[edited Nov 24, 2019 at 13:58](https://stackoverflow.com/posts/39188849/revisions)[![Peter Mortensen's user avatar](https://i.stack.imgur.com/RIZKi.png?s=64\&g=1)](https://stackoverflow.com/users/63550/peter-mortensen)[Peter Mortensen](https://stackoverflow.com/users/63550/peter-mortensen)30.8k2121 gold badges105105 silver badges131131 bronze badgesanswered Aug 28, 2016 at 7:13[![user1012506's user avatar](https://www.gravatar.com/avatar/371eb765b41f62d435eeb73fddb00b02?s=64\&d=identicon\&r=PG)](https://stackoverflow.com/users/1012506/user1012506)[user1012506](https://stackoverflow.com/users/1012506/user1012506)2,04811 gold badge2626 silver badges4545 bronze badges[Add a comment](https://stackoverflow.com/questions/826782/how-to-disable-text-selection-highlighting)61

**A Quick Hack Update**

If you use the value `none` for all the CSS `user-select` properties (including browser prefixes of it), there is a problem which can be still occurred by this.

```css
.div {
    -webkit-user-select: none; /* Chrome all / Safari all */
    -moz-user-select: none;    /* Firefox all             */
    -ms-user-select: none;     /* Internet Explorer  10+  */
     user-select: none;        /* Likely future           */
}
```

As [CSS-Tricks](https://css-tricks.com/almanac/properties/u/user-select/) says, the **problem** is:

[WebKit](http://en.wikipedia.org/wiki/WebKit) still allows the text to be copied, if you select elements around it.

You can also use the below one to `enforce` that an entire element gets selected which means if you click on an element, all the text wrapped in that element will get selected. For this all you have to do is changing the value `none` to `all`.

```css
.force-select {
    -webkit-user-select: all;  /* Chrome 49+     */
    -moz-user-select: all;     /* Firefox 43+    */
    -ms-user-select: all;      /* No support yet */
    user-select: all;          /* Likely future  */
}
```

[Share](https://stackoverflow.com/a/49587256)Follow[edited Nov 24, 2019 at 14:11](https://stackoverflow.com/posts/49587256/revisions)[![Peter Mortensen's user avatar](https://i.stack.imgur.com/RIZKi.png?s=64\&g=1)](https://stackoverflow.com/users/63550/peter-mortensen)[Peter Mortensen](https://stackoverflow.com/users/63550/peter-mortensen)30.8k2121 gold badges105105 silver badges131131 bronze badgesanswered Mar 31, 2018 at 11:32[![Kazmi's user avatar](https://www.gravatar.com/avatar/6062aba869c5eab1e06da139e62d8baf?s=64\&d=identicon\&r=PG\&f=y\&so-version=2)](https://stackoverflow.com/users/9438032/kazmi)[Kazmi](https://stackoverflow.com/users/9438032/kazmi)1,19899 silver badges2020 bronze badges[Add a comment](https://stackoverflow.com/questions/826782/how-to-disable-text-selection-highlighting)55

### With [SASS](https://sass-lang.com/) (SCSS syntax)

You can do this with a [mixin](https://sass-lang.com/documentation/at-rules/mixin):

```css
// Disable selection
@mixin disable-selection {
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none;   /* Safari */
    -khtml-user-select: none;    /* Konqueror HTML */
    -moz-user-select: none;      /* Firefox */
    -ms-user-select: none;       /* Internet Explorer/Edge */
    user-select: none;           /* Non-prefixed version, currently supported by Chrome and Opera */
}

// No selectable element
.no-selectable {
    @include disable-selection;
}
```

In an HTML tag:

```vbnet
<div class="no-selectable">TRY TO HIGHLIGHT. YOU CANNOT!</div>
```

***

**Try it** in this [CodePen](https://codepen.io/alessandroinfo/pen/eYNNQNv).

*If you are using an* [*autoprefixer*](https://github.com/postcss/autoprefixer) *you can remove other prefixes.*

Browser compatibility [here](https://caniuse.com/#feat=user-select-none).

[Share](https://stackoverflow.com/a/58339297)Follow[edited Jul 6, 2022 at 15:38](https://stackoverflow.com/posts/58339297/revisions)answered Oct 11, 2019 at 10:27[![Alessandro\_Russo's user avatar](https://i.stack.imgur.com/w9acI.jpg?s=64\&g=1)](https://stackoverflow.com/users/2893733/alessandro-russo)[Alessandro\_Russo](https://stackoverflow.com/users/2893733/alessandro-russo)1,7292121 silver badges3232 bronze badges[Add a comment](https://stackoverflow.com/questions/826782/how-to-disable-text-selection-highlighting)52

For those who have trouble achieving the same in the Android browser with the touch event, use:

```css
html, body {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-tap-highlight-color: transparent;
}
```

[Share](https://stackoverflow.com/a/23730262)Follow[edited Nov 24, 2019 at 13:37](https://stackoverflow.com/posts/23730262/revisions)[![Peter Mortensen's user avatar](https://i.stack.imgur.com/RIZKi.png?s=64\&g=1)](https://stackoverflow.com/users/63550/peter-mortensen)[Peter Mortensen](https://stackoverflow.com/users/63550/peter-mortensen)30.8k2121 gold badges105105 silver badges131131 bronze badgesanswered May 19, 2014 at 5:30[![Beep.exe's user avatar](https://i.stack.imgur.com/Gt39q.jpg?s=64\&g=1)](https://stackoverflow.com/users/2756352/beep-exe)[Beep.exe](https://stackoverflow.com/users/2756352/beep-exe)1,3681212 silver badges2121 bronze badges[Add a comment](https://stackoverflow.com/questions/826782/how-to-disable-text-selection-highlighting)49

If you are using [Less](https://en.wikipedia.org/wiki/Less_\(stylesheet_language\)) and [Bootstrap](https://en.wikipedia.org/wiki/Bootstrap_\(front-end_framework\)) you could write:

```css
.user-select(none);
```

[Share](https://stackoverflow.com/a/10205717)Follow[edited Apr 17, 2016 at 5:09](https://stackoverflow.com/posts/10205717/revisions)[![Peter Mortensen's user avatar](https://i.stack.imgur.com/RIZKi.png?s=64\&g=1)](https://stackoverflow.com/users/63550/peter-mortensen)[Peter Mortensen](https://stackoverflow.com/users/63550/peter-mortensen)30.8k2121 gold badges105105 silver badges131131 bronze badgesanswered Apr 18, 2012 at 8:34[![Codler's user avatar](https://www.gravatar.com/avatar/d400866ed03267fc211e1bdd1010ca96?s=64\&d=identicon\&r=PG)](https://stackoverflow.com/users/304894/codler)[Codler](https://stackoverflow.com/users/304894/codler)10.9k66 gold badges5252 silver badges6565 bronze badges[Add a comment](https://stackoverflow.com/questions/826782/how-to-disable-text-selection-highlighting)49

```css
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-o-user-select: none;
user-select: none;

*.unselectable {
   -moz-user-select: -moz-none;
   -khtml-user-select: none;
   -webkit-user-select: none;
   user-select: none;
}
```

```xml
<div id="foo" unselectable="on" class="unselectable">...</div>
```

```javascript
function makeUnselectable(node) {
    if (node.nodeType == 1) {
        node.unselectable = true;
    }
    var child = node.firstChild;
    while (child) {
        makeUnselectable(child);
        child = child.nextSibling;
    }
}

makeUnselectable(document.getElementById("foo"));
```

```css
-webkit-user-select: none;
-moz-user-select: none;
```

```xml
onselectstart="return false;"
```

```css
::selection { 
    background: transparent; 
}

::-moz-selection { 
    background: transparent; 
}

* {
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: -moz-none;
    -o-user-select: none;
    user-select: none;
}

p {
    -webkit-user-select: text;
    -khtml-user-select: text;
    -moz-user-select: text;
    -o-user-select: text;
    user-select: text;
}
```

```xml
<div class="draggable"></div>
```

```css
.draggable {
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    user-select: none;
}

.draggable input {
    -webkit-user-select: text;
    -khtml-user-select: text;
    -moz-user-select: text;
    -o-user-select: text;
    user-select: text;
 }
```

```javascript
if ($.browser.msie)
    $('.draggable').find(':not(input)').attr('unselectable', 'on');
```

[Share](https://stackoverflow.com/a/13081396)Follow[edited Nov 24, 2019 at 13:09](https://stackoverflow.com/posts/13081396/revisions)[![Peter Mortensen's user avatar](https://i.stack.imgur.com/RIZKi.png?s=64\&g=1)](https://stackoverflow.com/users/63550/peter-mortensen)[Peter Mortensen](https://stackoverflow.com/users/63550/peter-mortensen)30.8k2121 gold badges105105 silver badges131131 bronze badgesanswered Oct 26, 2012 at 5:44[![Gaurang's user avatar](https://www.gravatar.com/avatar/666c8bb336fff0703cb590ae4c3acfed?s=64\&d=identicon\&r=PG)](https://stackoverflow.com/users/1453858/gaurang)[Gaurang](https://stackoverflow.com/users/1453858/gaurang)1,9281818 silver badges1212 bronze badges[Add a comment](https://stackoverflow.com/questions/826782/how-to-disable-text-selection-highlighting)39

Aside from the Mozilla-only property, no, there is no way to disable text selection with just standard CSS (as of now).

If you notice, Stack Overflow doesn't disable text selection for their navigation buttons, and I would recommend against doing so in most cases, since it modifies normal selection behavior and makes it conflict with a user's expectations.

[Share](https://stackoverflow.com/a/826814)Followanswered May 5, 2009 at 20:38[![hbw's user avatar](https://i.stack.imgur.com/WKiWr.png?s=64\&g=1)](https://stackoverflow.com/users/90155/hbw)[hbw](https://stackoverflow.com/users/90155/hbw)15.5k66 gold badges5151 silver badges5858 bronze badges

* While I agree that it changes behaviour the user expects, it would make sense for things like the "Add Comment" button that is sitting next to this form field ... – [X-Istence](https://stackoverflow.com/users/13986/x-istence) [May 5, 2009 at 20:40](https://stackoverflow.com/questions/826782/how-to-disable-text-selection-highlighting#comment635582_826814)
* But doesn't that expose needless implementation details? An input or button's text can't be selected. – anon [May 5, 2009 at 20:40](https://stackoverflow.com/questions/826782/how-to-disable-text-selection-highlighting#comment635585_826814)
* @anon: Most users will probably not try to select the text of your button, so in practice, it shouldn't really matter much. Besides, in order to do so, they will have to start selecting *outside* of the button—if they click inside the button itself, the onclick handler will activate instead. Plus, certain browsers (e.g. Safari) actually let you select the text of normal buttons… – [hbw](https://stackoverflow.com/users/90155/hbw) [May 5, 2009 at 20:49](https://stackoverflow.com/questions/826782/how-to-disable-text-selection-highlighting#comment635625_826814)
* 8If you're selecting a set of comments from a chat thread and each comment has an upvote/downvote button next to it, then it would be nice to select the text without the other stuff. That's what the user expects or wants. He doesn't want to copy/paste the button labels with every comment. – [Mnebuerquo](https://stackoverflow.com/users/5114/mnebuerquo) [Aug 3, 2013 at 16:52](https://stackoverflow.com/questions/826782/how-to-disable-text-selection-highlighting#comment26382261_826814)
* 2And what if you for example double click a button which instead of redirecting you to another page opens a div? then the text for the button will be selected due to the double-click! – [Gigala](https://stackoverflow.com/users/1979982/gigala) [Jul 25, 2014 at 11:32](https://stackoverflow.com/questions/826782/how-to-disable-text-selection-highlighting#comment38785058_826814)

[Show 2 more comments](https://stackoverflow.com/questions/826782/how-to-disable-text-selection-highlighting)37

This works in *some* browsers:

```css
::selection{ background-color: transparent;}
::moz-selection{ background-color: transparent;}
::webkit-selection{ background-color: transparent;}
```

Simply add your desired elements/ids in front of the selectors separated by commas without spaces, like so:

```css
h1::selection,h2::selection,h3::selection,p::selection{ background-color: transparent;}
h1::moz-selection,h2::moz-selection,h3::moz-selection,p::moz-selection{ background-color: transparent;}
h1::webkit-selection,h2::webkit-selection,h3::webkit-selection,p::webkit-selection{ background-color: transparent;}
```

The other answers are better; this should probably be seen as a last resort/catchall.

[Share](https://stackoverflow.com/a/22975492)Follow[edited Apr 17, 2016 at 4:54](https://stackoverflow.com/posts/22975492/revisions)[![Peter Mortensen's user avatar](https://i.stack.imgur.com/RIZKi.png?s=64\&g=1)](https://stackoverflow.com/users/63550/peter-mortensen)[Peter Mortensen](https://stackoverflow.com/users/63550/peter-mortensen)30.8k2121 gold badges105105 silver badges131131 bronze badgesanswered Apr 9, 2014 at 22:56[![r3wt's user avatar](https://i.stack.imgur.com/3Z7uv.jpg?s=64\&g=1)](https://stackoverflow.com/users/2401804/r3wt)[r3wt](https://stackoverflow.com/users/2401804/r3wt)4,64322 gold badges3333 silver badges5555 bronze badges

* 4There are few things that can be known for sure, but this solution definitely doesn't work in *all* browsers. – [Volker E.](https://stackoverflow.com/users/1696030/volker-e) [Sep 30, 2014 at 9:27](https://stackoverflow.com/questions/826782/how-to-disable-text-selection-highlighting#comment40931403_22975492)

[Add a comment](https://stackoverflow.com/questions/826782/how-to-disable-text-selection-highlighting)37

Suppose there are two `div`s like this:

```css
.second {
  cursor: default;
  user-select: none;
  -webkit-user-select: none;
  /* Chrome/Safari/Opera */
  -moz-user-select: none;
  /* Firefox */
  -ms-user-select: none;
  /* Internet Explorer/Edge */
  -webkit-touch-callout: none;
  /* iOS Safari */
}
```

```xml
<div class="first">
  This is my first div
</div>

<div class="second">
  This is my second div
</div>
```

&#x20;Run code snippetExpand snippet

Set cursor to default so that it will give a unselectable feel to the user.

> Prefix need to be used to support it in all browsers. Without a prefix this may not work in all the answers.

[Share](https://stackoverflow.com/a/36259680)Follow[edited Nov 2, 2019 at 14:24](https://stackoverflow.com/posts/36259680/revisions)[![Peter Mortensen's user avatar](https://i.stack.imgur.com/RIZKi.png?s=64\&g=1)](https://stackoverflow.com/users/63550/peter-mortensen)[Peter Mortensen](https://stackoverflow.com/users/63550/peter-mortensen)30.8k2121 gold badges105105 silver badges131131 bronze badgesanswered Mar 28, 2016 at 9:42[![Gaurav Aggarwal's user avatar](https://www.gravatar.com/avatar/bc594b6bb9e7d5427b0b08e2d0036851?s=64\&d=identicon\&r=PG\&f=y\&so-version=2)](https://stackoverflow.com/users/4119808/gaurav-aggarwal)[Gaurav Aggarwal](https://stackoverflow.com/users/4119808/gaurav-aggarwal)9,76966 gold badges3636 silver badges7474 bronze badges[Add a comment](https://stackoverflow.com/questions/826782/how-to-disable-text-selection-highlighting)33

This will be useful if color selection is also not needed:

```css
::-moz-selection { background:none; color:none; }
::selection { background:none; color:none; }
```

...all other browser fixes. It will work in [Internet Explorer 9](http://en.wikipedia.org/wiki/Internet_Explorer_9) or later.

[Share](https://stackoverflow.com/a/15782391)Follow[edited Apr 17, 2016 at 5:01](https://stackoverflow.com/posts/15782391/revisions)[![Peter Mortensen's user avatar](https://i.stack.imgur.com/RIZKi.png?s=64\&g=1)](https://stackoverflow.com/users/63550/peter-mortensen)[Peter Mortensen](https://stackoverflow.com/users/63550/peter-mortensen)30.8k2121 gold badges105105 silver badges131131 bronze badgesanswered Apr 3, 2013 at 8:31[![karthipan raj's user avatar](https://www.gravatar.com/avatar/5e71010ed0b207957bd11b97d7642968?s=64\&d=identicon\&r=PG)](https://stackoverflow.com/users/2027885/karthipan-raj)[karthipan raj](https://stackoverflow.com/users/2027885/karthipan-raj)65711 gold badge88 silver badges1515 bronze badges

* 1Make that `color: inherit;` maybe. – [yaakov](https://stackoverflow.com/users/4633197/yaakov) [Jul 28, 2016 at 1:25](https://stackoverflow.com/questions/826782/how-to-disable-text-selection-highlighting#comment64636461_15782391)
* yeah I love it. It's css selector level 3 according to [Mozilla docs](https://developer.mozilla.org/id/docs/Web/CSS/::selection) – [Bariq Dharmawan](https://stackoverflow.com/users/6738162/bariq-dharmawan) [Jan 28, 2018 at 10:37](https://stackoverflow.com/questions/826782/how-to-disable-text-selection-highlighting#comment83963476_15782391)

[Add a comment](https://stackoverflow.com/questions/826782/how-to-disable-text-selection-highlighting)32

Add this to the first div in which you want to disable the selection for text:

```ini
onmousedown='return false;' 
onselectstart='return false;'
```

[Share](https://stackoverflow.com/a/13134101)Follow[edited Mar 10, 2013 at 19:58](https://stackoverflow.com/posts/13134101/revisions)[![Peter Mortensen's user avatar](https://i.stack.imgur.com/RIZKi.png?s=64\&g=1)](https://stackoverflow.com/users/63550/peter-mortensen)[Peter Mortensen](https://stackoverflow.com/users/63550/peter-mortensen)30.8k2121 gold badges105105 silver badges131131 bronze badgesanswered Oct 30, 2012 at 6:56[![JIT1986's user avatar](https://i.stack.imgur.com/T5CbB.jpg?s=64\&g=1)](https://stackoverflow.com/users/1716164/jit1986)[JIT1986](https://stackoverflow.com/users/1716164/jit1986)68266 silver badges99 bronze badges[Add a comment](https://stackoverflow.com/questions/826782/how-to-disable-text-selection-highlighting)30

**NOTE:**

The correct answer is correct in that it prevents you from being able to select the text. However, it does not prevent you from being able to copy the text, as I'll show with the next couple of screenshots (as of 7th Nov 2014).

![Before we have selected anything](https://i.stack.imgur.com/gcKTY.png)

![After we have selected](https://i.stack.imgur.com/xwPld.png)

![The numbers have been copied](https://i.stack.imgur.com/Ex6UH.png)

As you can see, we were unable to select the numbers, but we were able to copy them.

Tested on: [Ubuntu](http://en.wikipedia.org/wiki/Ubuntu_\(operating_system\)), [Google Chrome](http://en.wikipedia.org/wiki/Google_Chrome) 38.0.2125.111.

[Share](https://stackoverflow.com/a/26802255)Follow[edited Apr 17, 2016 at 4:52](https://stackoverflow.com/posts/26802255/revisions)[![Peter Mortensen's user avatar](https://i.stack.imgur.com/RIZKi.png?s=64\&g=1)](https://stackoverflow.com/users/63550/peter-mortensen)[Peter Mortensen](https://stackoverflow.com/users/63550/peter-mortensen)30.8k2121 gold badges105105 silver badges131131 bronze badgesanswered Nov 7, 2014 at 13:22[![Luke Madhanga's user avatar](https://www.gravatar.com/avatar/eeea01e6b7d9da8be679d079f39355b4?s=64\&d=identicon\&r=PG)](https://stackoverflow.com/users/1925574/luke-madhanga)[Luke Madhanga](https://stackoverflow.com/users/1925574/luke-madhanga)6,79122 gold badges4343 silver badges4646 bronze badges

* 1I've had the same problem. On Mac Chrome 48.0.2564.116 and on Mac Safari 9.0.3. Notably, Mac Firefox 43.0 doesn't copy the character, but sticks extra endlines between them. What should be done about this? – [NHDaly](https://stackoverflow.com/users/751061/nhdaly) [Mar 5, 2016 at 1:34](https://stackoverflow.com/questions/826782/how-to-disable-text-selection-highlighting#comment59287166_26802255)&#x20;

[Add a comment](https://stackoverflow.com/questions/826782/how-to-disable-text-selection-highlighting)28

It is easily done with:

```css
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
```

***

Alternatively:

Let's say you have a `<h1 id="example">Hello, World!</h1>`. You will have to remove the innerHTML of that `h1`, in this case **Hello, World**. Then you will have to go to CSS and do this:

```scss
#example::before // You can of course use **::after** as well.
{
    content: 'Hello, World!'; // Both single-quotes and double-quotes can be used here.

    display: block; // To make sure it works fine in every browser.
}
```

Now it simply thinks it is a block-element, and not text.

[Share](https://stackoverflow.com/a/53204657)Follow[edited Nov 24, 2019 at 14:16](https://stackoverflow.com/posts/53204657/revisions)[![Peter Mortensen's user avatar](https://i.stack.imgur.com/RIZKi.png?s=64\&g=1)](https://stackoverflow.com/users/63550/peter-mortensen)[Peter Mortensen](https://stackoverflow.com/users/63550/peter-mortensen)30.8k2121 gold badges105105 silver badges131131 bronze badgesanswered Nov 8, 2018 at 9:17[![codeWithMe's user avatar](https://lh5.googleusercontent.com/-WAiwZ6XS2kQ/AAAAAAAAAAI/AAAAAAAAAAg/QJXO6qKFWjM/photo.jpg?sz=64)](https://stackoverflow.com/users/10087397/codewithme)[codeWithMe](https://stackoverflow.com/users/10087397/codewithme)8521212 silver badges1717 bronze badges[Add a comment](https://stackoverflow.com/questions/826782/how-to-disable-text-selection-highlighting)27

To get the result I needed, I found I had to use both **`::selection`** and **`user-select`**

```css
input.no-select:focus {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

input.no-select::selection {
    background: transparent;
}

input.no-select::-moz-selection {
    background: transparent;
}
```

[Share](https://stackoverflow.com/a/30227267)Follow[edited Nov 24, 2019 at 13:46](https://stackoverflow.com/posts/30227267/revisions)[![Peter Mortensen's user avatar](https://i.stack.imgur.com/RIZKi.png?s=64\&g=1)](https://stackoverflow.com/users/63550/peter-mortensen)[Peter Mortensen](https://stackoverflow.com/users/63550/peter-mortensen)30.8k2121 gold badges105105 silver badges131131 bronze badgesanswered May 14, 2015 at 0:13[![SemanticZen's user avatar](https://www.gravatar.com/avatar/39d7559a5241f99cec3d3b65dac2873c?s=64\&d=identicon\&r=PG)](https://stackoverflow.com/users/859857/semanticzen)[SemanticZen](https://stackoverflow.com/users/859857/semanticzen)1,1411414 silver badges2121 bronze badges[Add a comment](https://stackoverflow.com/questions/826782/how-to-disable-text-selection-highlighting)23

This is not CSS, but it is worth a mention:

[jQuery UI Disable Selection](http://api.jqueryui.com/disableSelection/):

```javascript
$("your.selector").disableSelection();
```

[Share](https://stackoverflow.com/a/15907680)Followanswered Apr 9, 2013 at 16:42[![Automatico's user avatar](https://www.gravatar.com/avatar/4a92d66111d2f71d36b14aec1741fb14?s=64\&d=identicon\&r=PG)](https://stackoverflow.com/users/741850/automatico)[Automatico](https://stackoverflow.com/users/741850/automatico)12.4k99 gold badges8181 silver badges110110 bronze badges[Add a comment](https://stackoverflow.com/questions/826782/how-to-disable-text-selection-highlighting)21

Check my solution without JavaScript:

[jsFiddle](http://jsfiddle.net/y4Lac/)

```css
li:hover {
    background-color: silver;
}
#id1:before {
    content: "File";
}
#id2:before {
    content: "Edit";
}
#id3:before {
    content: "View";
}
```

```xml
<ul>
    <li><a id="id1" href="www.w1.com"></a>
    <li><a id="id2" href="www.w2.com"></a>
    <li><a id="id3" href="www.w3.com"></a>
</ul>
```

&#x20;Run code snippetExpand snippet

Popup menu with my technique applied: <http://jsfiddle.net/y4Lac/2/>

[Share](https://stackoverflow.com/a/21961233)Follow[edited Apr 17, 2016 at 5:00](https://stackoverflow.com/posts/21961233/revisions)[![Peter Mortensen's user avatar](https://i.stack.imgur.com/RIZKi.png?s=64\&g=1)](https://stackoverflow.com/users/63550/peter-mortensen)[Peter Mortensen](https://stackoverflow.com/users/63550/peter-mortensen)30.8k2121 gold badges105105 silver badges131131 bronze badgesanswered Feb 22, 2014 at 22:06[![apocalypse's user avatar](https://i.stack.imgur.com/Z2aRg.jpg?s=64\&g=1)](https://stackoverflow.com/users/1109215/apocalypse)[apocalypse](https://stackoverflow.com/users/1109215/apocalypse)5,75499 gold badges4747 silver badges9494 bronze badges[Add a comment](https://stackoverflow.com/questions/826782/how-to-disable-text-selection-highlighting)21

I have learned from the [CSS-Tricks](https://css-tricks.com/almanac/properties/u/user-select/) website.

```css
user-select: none;
```

And this also:

```css
::selection {
    background-color: transparent;
}

::moz-selection {
    background-color: transparent;
}

::webkit-selection {
    background-color: transparent;
}
```

[Share](https://stackoverflow.com/a/36354972)Follow[edited Nov 24, 2019 at 13:51](https://stackoverflow.com/posts/36354972/revisions)[![Peter Mortensen's user avatar](https://i.stack.imgur.com/RIZKi.png?s=64\&g=1)](https://stackoverflow.com/users/63550/peter-mortensen)[Peter Mortensen](https://stackoverflow.com/users/63550/peter-mortensen)30.8k2121 gold badges105105 silver badges131131 bronze badgesanswered Apr 1, 2016 at 11:16[![Mohammed Javed's user avatar](https://i.stack.imgur.com/UO4HS.jpg?s=64\&g=1)](https://stackoverflow.com/users/3256161/mohammed-javed)[Mohammed Javed](https://stackoverflow.com/users/3256161/mohammed-javed)86622 gold badges99 silver badges2424 bronze badges

* 1It only makes it invisible – [Tiago Rangel](https://stackoverflow.com/users/14264568/tiago-rangel) [Jun 29, 2021 at 11:54](https://stackoverflow.com/questions/826782/how-to-disable-text-selection-highlighting#comment120496810_36354972)

[Add a comment](https://stackoverflow.com/questions/826782/how-to-disable-text-selection-highlighting)21

## FIRST METHOD: ( TOTALLY NONSENSE ):

```css
.no-select::selection, .no-select *::selection {
  background-color: Transparent;
}

.no-select { /* Sometimes I add this too. */
  cursor: default;
}
```

```xml
<span>RixTheTyrunt is da best!</span>
<br>
<span class="no-select">RixTheTyrunt is da best!</span>
```

Snippet:

```css
.no-select::selection, .no-select *::selection {
  background-color: Transparent;
}

.no-select {
  /* Sometimes I add this too. */
  cursor: default;
}
```

```xml
<span>RixTheTyrunt is da best!</span>
<br>
<span class="no-select">RixTheTyrunt is da best!</span>
```

&#x20;Run code snippetExpand snippet

## SECOND METHOD ( NO NONSENSE INCLUDED )

```css
.no-select {
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
}
```

Snippet:

```css
.no-select {
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
}
```

```xml
<span>RixTheTyrunt is da best!</span>
<br>
<span class="no-select">RixTheTyrunt is da best!</span>
```

&#x20;Run code snippetExpand snippet

> First, solve the problem. Then, write the code.
>
> John Johnson

[Share](https://stackoverflow.com/a/70134530)Follow[edited Jan 14, 2022 at 15:50](https://stackoverflow.com/posts/70134530/revisions)community wiki\
[3 revs<br>](https://stackoverflow.com/posts/70134530/revisions)[RixTheTyrunt](https://stackoverflow.com/users/16359609)[Add a comment](https://stackoverflow.com/questions/826782/how-to-disable-text-selection-highlighting)1[2](https://stackoverflow.com/questions/826782/how-to-disable-text-selection-highlighting?page=2\&tab=scoredesc#tab-top)[Next](https://stackoverflow.com/questions/826782/how-to-disable-text-selection-highlighting?page=2\&tab=scoredesc#tab-top)[Highly active question](https://stackoverflow.com/help/privileges/protect-questions). Earn 10 reputation (not counting the [association bonus](https://meta.stackexchange.com/questions/141648/what-is-the-association-bonus-and-how-does-it-work)) in order to answer this question. The reputation requirement helps protect this question from spam and non-answer activity.

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

1. [How to Disable Text Selection Highlighting with CSS](https://www.w3docs.com/snippets/javascript/how-to-disable-text-selection-copy-cut-paste-and-right-click-on-a-web-page.html#how-to-disable-text-selection-highlighting-with-css-2)
   * [Example](https://www.w3docs.com/snippets/javascript/how-to-disable-text-selection-copy-cut-paste-and-right-click-on-a-web-page.html#example-5)
2. [How to Disable Text Selection with JavaScript](https://www.w3docs.com/snippets/javascript/how-to-disable-text-selection-copy-cut-paste-and-right-click-on-a-web-page.html#how-to-disable-text-selection-with-javascript-8)
   * [Example](https://www.w3docs.com/snippets/javascript/how-to-disable-text-selection-copy-cut-paste-and-right-click-on-a-web-page.html#example-10)
3. [How to Disable Copy, Cut, and Paste with JavaScript/jQuery.](https://www.w3docs.com/snippets/javascript/how-to-disable-text-selection-copy-cut-paste-and-right-click-on-a-web-page.html#how-to-disable-copy-cut-and-paste-with-javascript-jquery-12)
   * [Example](https://www.w3docs.com/snippets/javascript/how-to-disable-text-selection-copy-cut-paste-and-right-click-on-a-web-page.html#example-14)
   * [Example](https://www.w3docs.com/snippets/javascript/how-to-disable-text-selection-copy-cut-paste-and-right-click-on-a-web-page.html#example-17)
4. [How to Disable Right-click with JavaScript/jQuery](https://www.w3docs.com/snippets/javascript/how-to-disable-text-selection-copy-cut-paste-and-right-click-on-a-web-page.html#how-to-disable-right-click-with-javascript-jquery-19)
   * [Example](https://www.w3docs.com/snippets/javascript/how-to-disable-text-selection-copy-cut-paste-and-right-click-on-a-web-page.html#example-22)
5. [Related Resources](https://www.w3docs.com/snippets/javascript/how-to-disable-text-selection-copy-cut-paste-and-right-click-on-a-web-page.html#related-resources)

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.

[![Watch a course](https://www.w3docs.com/images/svg/youtube.svg)Watch a video course **JavaScript - The Complete Guide (Beginner + Advanced)**](https://www.w3docs.com/course/javascript-the-complete-guide-2020-beginner-advanced)

### How to Disable Text Selection Highlighting with CSS <a href="#how-to-disable-text-selection-highlighting-with-css-2" id="how-to-disable-text-selection-highlighting-with-css-2"></a>

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 <a href="#example-5" id="example-5"></a>

```
<!DOCTYPE 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>
```

[Try it Yourself »](https://www.w3docs.com/tools/code-editor/2432)If you need to disable text selection for the whole page, apply the user-select to the [\<body>](https://www.w3docs.com/learn-html/html-body-tag.html) element.

### How to Disable Text Selection with JavaScript <a href="#how-to-disable-text-selection-with-javascript-8" id="how-to-disable-text-selection-with-javascript-8"></a>

Apply the onmousedown and onselectstart [Events](https://www.w3docs.com/learn-javascript/javascript-events.html) to the [\<body>](https://www.w3docs.com/learn-html/html-body-tag.html) or [\<div>](https://www.w3docs.com/learn-html/html-div-tag.html) tags to prevent text selection and copy/cut on your website. It override the default behavior of the browsers.

#### Example <a href="#example-10" id="example-10"></a>

```
<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body onmousedown="return false" onselectstart="return false">
    <h2>Unselectable text</h2>
    <p>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.</p>
  </body>
</html>
```

[Try it Yourself »](https://www.w3docs.com/tools/code-editor/2436)

### How to Disable Copy, Cut, and Paste with JavaScript/jQuery. <a href="#how-to-disable-copy-cut-and-paste-with-javascript-jquery-12" id="how-to-disable-copy-cut-and-paste-with-javascript-jquery-12"></a>

You can allow text selection, but prevent copy and cut functions using the oncopy, oncut and onpaste [event attributes](https://www.w3docs.com/learn-html/global-event-attributes.html). By adding these attributes into a textbox’s [\<input>](https://www.w3docs.com/learn-html/html-input-tag.html) tag, you can disable cut, copy and paste features. The user is left with the option to enter the field manually with these attributes set.

#### Example <a href="#example-14" id="example-14"></a>

```
<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h2>Copy, cut and paste disabled</h2>
    <input type="text" onselectstart="return false" onpaste="return false;" onCopy="return false" onCut="return false" onDrag="return false" onDrop="return false" autocomplete=off/>
    <br>
  </body>
</html>
```

[Try it Yourself »](https://www.w3docs.com/tools/code-editor/2439)

The same effect can be achieved by using the jQuery **bind()** function specifying cut and copy events that are fired when the user cuts or copies a text.

#### Example <a href="#example-17" id="example-17"></a>

```
<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
  </head>
  <body>
    <h2>Copy and cut disabled</h2>
    <p>I am a text and you cannot copy or cut me.</p>
    <script>
      $(document).ready(function() {
          $('body').bind('cut copy', function(e) {
              e.preventDefault();
            });
        });
    </script>
  </body>
</html>
```

[Try it Yourself »](https://www.w3docs.com/tools/code-editor/2441)

### How to Disable Right-click with JavaScript/jQuery <a href="#how-to-disable-right-click-with-javascript-jquery-19" id="how-to-disable-right-click-with-javascript-jquery-19"></a>

To disable right-click on you page, you need to add the oncontextmenu event and "return false" in the event handler. It will block all the access to the context menu from mouse right-click.

Use the **bind()** jQuery function to disable the right-click feature.This method disables the right-click (context menu) feature on a text field, and also alerts the user with a popup message.

#### Example <a href="#example-22" id="example-22"></a>

```
<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
  </head>
  <body>
    <h2>Right-click disabled</h2>
    <p>For this page the right-click is disabled.</p>
    <script>
      $(document).ready(function() {
          $("body").on("contextmenu", function(e) {
              return false;
            });
        });
    </script>
  </body>
</html>
```

[Try it Yourself »](https://www.w3docs.com/tools/code-editor/2446)Remember that it is not possible to prevent text extraction in your document in any way (100 percent secure), for there are many ways to retrieve a website's content, i.e., the Browser Developers Console.