How to make HTML Text unselectable

Question

I would like to add text to my webpage as a label and make it unselectable.

In other words, When the mouse cursor is over the text I would like it to not turn into a text selecting cursor at all.

A good example of what I'm trying to achieve is the buttons on this website (Questions,Tags,Users,...)

BalusC · Accepted Answer · 2014-12-01T12:17:22.547

You can't do this with plain vanilla HTML, so JSF can't do much for you here as well.

If you're targeting decent browsers only, then just make use of CSS3:

.unselectable {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

<label class="unselectable">Unselectable label</label>

If you'd like to cover older browsers as well, then consider this JavaScript fallback:

<!doctype html>
<html lang="en">
    <head>
        <title>SO question 2310734</title>
        <script>
            window.onload = function() {
                var labels = document.getElementsByTagName('label');
                for (var i = 0; i < labels.length; i++) {
                    disableSelection(labels[i]);
                }
            };
            function disableSelection(element) {
                if (typeof element.onselectstart != 'undefined') {
                    element.onselectstart = function() { return false; };
                } else if (typeof element.style.MozUserSelect != 'undefined') {
                    element.style.MozUserSelect = 'none';
                } else {
                    element.onmousedown = function() { return false; };
                }
            }
        </script>
    </head>
    <body>
        <label>Try to select this</label>
    </body>
</html>

If you're already using jQuery, then here's another example which adds a new function disableSelection() to jQuery so that you can use it anywhere in your jQuery code:

<!doctype html>
<html lang="en">
    <head>
        <title>SO question 2310734 with jQuery</title>
        <script src="http://code.jquery.com/jquery-latest.min.js"></script>
        <script>
            $.fn.extend({ 
                disableSelection: function() { 
                    this.each(function() { 
                        if (typeof this.onselectstart != 'undefined') {
                            this.onselectstart = function() { return false; };
                        } else if (typeof this.style.MozUserSelect != 'undefined') {
                            this.style.MozUserSelect = 'none';
                        } else {
                            this.onmousedown = function() { return false; };
                        }
                    }); 
                } 
            });

            $(document).ready(function() {
                $('label').disableSelection();            
            });
        </script>
    </head>
    <body>
        <label>Try to select this</label>
    </body>
</html>

This answer has a problem, and it does not work in all cases any more. Other browsers use their own vendor prefixes, and you are using `MozUserSelect` only. New browsers will use no prefix. Look at the list of all possible javascript prefixes: ['Moz', 'Webkit', 'ms', 'O', 'Khtml', ''] /*with empty string for no prefix*/. You should correctly deal with camelCase. And it's a serious bug that you are overwriting `onselectstart` and `onmousedown` event handlers with your function, so previously attached handlers do not work any more. I can Update your code if you like — Dan, Jul 18 '13 at 09:45
@BalusC as far as I see here https://developer.mozilla.org/en-US/docs/Web/CSS/user-select, you still can't do this cross browser with CSS only (old IE, Opera and Firefox). So a good hybrid solution is needed — Dan, Jul 18 '13 at 12:54
If you do end up adding the disableSelection to jQuery - I did, and it works great, but give it another name. In case you end up using jQuery UI there's a name conflict when using plugins like resizable. Just a heads up. — webdreamer, Jan 13 '15 at 15:14
That's why I love being a developer, now I found how to copy some piece of text they don't want me to copy. Just search for the problem they probably had :). — CularBytes, Aug 03 '20 at 19:01
I want to know how one would undo the jquery function. Like `$(".element").mousedown(function() { $('body').disableSelection(); )}; $(window).mouseup(function() { $('body').undoThedisableSelectionFunction(); });` — Jevon, Jan 31 '22 at 17:10
You or someone here might do an easy job of answering this question https://stackoverflow.com/questions/70930570/how-to-make-whole-document-selectable-after-making-it-unselectable — Jevon, Jan 31 '22 at 17:52

Blowsie · Answer 2 · 2022-06-01T08:12:34.403

183

No one here posted an answer with all of the correct CSS variations, so here it is:

.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;
}

<p class="not-selectable">Not-selectable text</p>

edited Jun 01 '22 at 08:12

answered Jun 17 '11 at 07:09

Blowsie

40,239
15
88
108

3

These do work well in modern browsers, but be aware that older ones like IE7 will not support this. – Jarrod Nettles Aug 11 '11 at 15:26
3

In Chrome 18, this is only a visual effect, the text is still selectable. – j08691 May 04 '12 at 17:15
2

Can still select text in Opera 11 – Almo Jun 13 '12 at 20:34
1

Can still select text in Opera. – john-jones Nov 10 '13 at 20:12
For Opera, does the '-o-' prefix work? – joeytwiddle Feb 23 '14 at 08:28
@joeytwiddle Might be worth sticking it in just in case. – Matt Jun 30 '14 at 16:34
CSS does not work in Chrome Version 56.0.2924.87 (64-bit). Still copies to clipboard... – Ronnie Royston Feb 07 '17 at 21:27
2

@RonRoyston the questions is about selecting not copying. But maybe u want [this](https://jsfiddle.net/6ppm9jt5/1/). – Huelfe Apr 04 '17 at 10:58

score 62 · Answer 3 · edited Apr 10 '16 at 23:15

62

The full modern solution to your problem is purely CSS-based, but note that older browsers won't support it, in which cases you'd need to fallback to solutions such as the others have provided.

So in pure CSS:

-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;

However the mouse cursor will still change to a caret when over the element's text, so you add to that:

cursor: default;

Modern CSS is pretty elegant.

edited Apr 10 '16 at 23:15

ecoe

4,994
7
54
72

answered Nov 23 '11 at 16:04

Vic Goldfeld

1,179
12
15

43

you call that modern? having to specify the same thing 6 times? – FlavorScape Jul 19 '12 at 00:16
1

yeah I hate the browser prefixes too but oh well they have a history of not agreeing so we got used to having these around. – Vic Goldfeld Jul 22 '12 at 19:26
3

@FlavorScape I use [less](http://lesscss.org), so I only have to write this snippet once! :) – Camilo Martin Sep 01 '12 at 00:18
You can also use [SASS](http://sass-lang.com/guide) and specify a _mixin_ for that. – Bruno Finger Aug 01 '14 at 17:36
1

Specifying the cursor seems to be no longer needed. It will change to `default` automatically with the correct variation of `user-select: none`. Tested in Firefox 61.0.1 and Vivaldi 1.15.1147.47. – Sinthorion Jul 25 '18 at 13:37

score 12 · Answer 4 · answered Feb 21 '11 at 20:40

I altered the jQuery plugin posted above so it would work on live elements.

(function ($) {
$.fn.disableSelection = function () {
    return this.each(function () {
        if (typeof this.onselectstart != 'undefined') {
            this.onselectstart = function() { return false; };
        } else if (typeof this.style.MozUserSelect != 'undefined') {
            this.style.MozUserSelect = 'none';
        } else {
            this.onmousedown = function() { return false; };
        }
    });
};
})(jQuery);

Then you could so something like:

$(document).ready(function() {
    $('label').disableSelection();

    // Or to make everything unselectable
    $('*').disableSelection();
});

This was a great answer, but unfortunately it got outdated. See my comment to @BalusC answer — Dan, Jul 18 '13 at 09:51

How to make HTML Text unselectable

4 Answers4

Linked