How do I disable text selection with CSS or JavaScript?

Question

I am making a HTML/CSS/jQuery gallery, with several pages.

I indeed have a "next" button, which is a simple link with a jQuery click listener.

The problem is that if the user click the button several times, the text of the button is selected, and then the full line of text. In my really darky design, that is really ugly and nonsensical.

So here is my question: Can you disable text selection on HTML? If not, I'll terribly miss flash and its high level of configuration on textfields...

It's 2018 :P Check n try these methods ---> http://www.freakyjolly.com/how-to-disable-text-selection-highlighting/ — Code Spy, Oct 30 '18 at 09:39

score 352 · Accepted Answer · edited Jun 01 '15 at 17:08

352

<div 
 style="-moz-user-select: none; -webkit-user-select: none; -ms-user-select:none; user-select:none;-o-user-select:none;" 
 unselectable="on"
 onselectstart="return false;" 
 onmousedown="return false;">
    Blabla
</div>

edited Jun 01 '15 at 17:08

Andy

4,783
2
26
51

answered Sep 23 '10 at 14:44

Jerome

8,427
2
32
41

Still don't work in safari and chrome. I keep that solution, but i also implement one work around for the rest: at each click, replace the html of the link by the html of the link. the text is then updated, and the selection go off after 1 half second! – daviddarx Sep 23 '10 at 15:39
1

The CSS for webkit is similar to the one for Firefox, I edited the answer to add it. – Jerome Sep 24 '10 at 05:53
1

@daviddarx Works in Chrome 17 and Safari 5. – mhenry1384 Feb 29 '12 at 22:02
1

Works in IE and Opera after update – Dan Jul 18 '13 at 13:56
2

Is this still good in 2014? – JohnK Jan 22 '14 at 19:31
5

yes, it is http://caniuse.com/#feat=user-select-none – MartyIX Aug 23 '15 at 11:37
Will this affect SEO? – Arnold Parge Jan 09 '22 at 08:32

Blowsie · Answer 2 · 2017-07-25T12:24:39.313

350

UPDATE January, 2017:

According to Can I use, the user-select is currently supported in all browsers except Internet Explorer 9 and earlier versions (but sadly still needs a vendor prefix).

All of the correct CSS variations are:

.noselect {
  -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 */
}

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

Note that it's a non-standard feature (i.e. not a part of any specification). It is not guaranteed to work everywhere, and there might be differences in implementation among browsers and in the future browsers can drop support for it.

More information can be found in Mozilla Developer Network documentation.

edited Jul 25 '17 at 12:24

answered Feb 16 '12 at 15:53

Blowsie

40,239
15
88
108

14

"correct CSS variations"...? The only correct CSS "variation" is `user-select`. – BoltClock May 06 '12 at 06:08
16

okay so the others are vendor specific prefixes, I'd presume anyone else would class those are correct variations. – Blowsie May 08 '12 at 07:51
3

Ha ha, Are you planning on earning all your rep with same answer? NICE :) – Starx Nov 07 '12 at 04:31
3

Everyone should know where this works and where does not http://caniuse.com/user-select-none – Dan Jul 18 '13 at 13:54
1

provided solution is not working for opera browser . How to set the user-select option for opera – Raja Nov 18 '13 at 05:44

score 37 · Answer 3 · answered Dec 21 '11 at 23:33

37

Try this CSS code for cross-browser compatibility.

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

answered Dec 21 '11 at 23:33

Nyxynyx

61,411
155
482
830

4

easy to be a web dev in 2021: `user-select: none;` is enough. – naXa stands with Ukraine Apr 15 '21 at 16:48
:( didn't work for me – Joseph Ali Mar 27 '22 at 15:53
@naXastandswithUkraine not in Safari unfortunately, and this is assuming everyone keeps their browser up-to-date, which they annoyingly don't. Still with using all the above mentioned for now. – James William May 27 '22 at 12:08

score 6 · Answer 4 · edited Sep 29 '21 at 05:08

6

You can use JavaScript to do what you want:

if (document.addEventListener !== undefined) {
    // Not IE
    document.addEventListener('click', checkSelection, false);
} else {
    // IE
    document.attachEvent('onclick', checkSelection);
}

function checkSelection() {
    var sel = {};
    if (window.getSelection) {
        // Mozilla
        sel = window.getSelection();
    } else if (document.selection) {
        // IE
        sel = document.selection.createRange();
    }

    // Mozilla
    if (sel.rangeCount) {
        sel.removeAllRanges();
        return;
    }

    // IE
    if (sel.text > '') {
        document.selection.empty();
        return;
    }
}

Soap box: You really shouldn't be screwing with the client's user agent in this manner. If the client wants to select things on the document, then they should be able to select things on the document. It doesn't matter if you don't like the highlight color, because you aren't the one viewing the document.

edited Sep 29 '21 at 05:08

Saurin Dashadia

1,140
11
25

answered Sep 23 '10 at 16:20

James Sumners

14,485
10
59
77

25

**Soap box rebuttal**: I have a button which, when clicked, runs some javascript to change the scale of a picture. There is no reason for the user to select the "+" or "-" inside that button, but most web browsers will end up with the text selected after a few button clicks. Similarly, if you're doing drag-and-drop via javascript, you don't want to select the things you drag something over. That said, I appreciate the fact that you still answered the question even though you disagree with the goal. – Robert Apr 06 '12 at 16:59
2

I'll concede that there are circumstances where it can be a valid design choice. But the question mentioned he'd miss Flash with the implication that he'd miss being able to control the user's client. I disagree with that mode of thinking. As a user, I do not like site's redefining how my local software works. It's also an accessibility issue. – James Sumners Apr 06 '12 at 17:16
2

@jsumners There are _plenty_ of circumstances. Do some out-of-the-box thinking and you'll come up with multiple scenarios. Just because browsers enable this by default does not mean we as programmers should conform. Besides, mobile computing is doing away with traditional means of text selection. So it's becoming increasingly relevant. You make it sound like it's some kind of obsolete hack or something, it's a __supported feature__ (see answers above.) – arkon Oct 01 '12 at 21:49
@b1naryatr0phy again, the OP specifically described a scenario in which he wanted to control the user's client purely for aesthetic reasons. His goal had nothing to do with function, be it touch or otherwise. In particular, he states that he would miss the ability to completely control the user's interaction like he could with Flash. I believe that is a broken way of developing for the web and said as much _after_ providing a solution that doesn't rely on potentially unimplemented CSS features (at the time). – James Sumners Oct 01 '12 at 22:48
2

@jsumners Is it not the website designer's decision how a user interacts with his/her page, regardless of the aesthetic or functional purpose? – arkon Oct 01 '12 at 23:47
No. That is completely up to the client and/or user. This question is essentially the same as "how do I control the user's font size?" The answer is, you can't. Sure, you can specify all sorts of stuff in the stylesheet you deliver with the page, but I can throw thing out and use my own stylesheet to do whatever I want. Same thing with JavaScript. But who wants to do that for a random site? No, the user who finds their client altered by a site is likely to never visit it again. Read http://www.alistapart.com/articles/dao it's old but still applies. – James Sumners Oct 02 '12 at 01:16
If it were "completely up to the end user", there we be no functional difference between one website to the next. So I honestly can't see how that makes sense. I also fail to understand how this question could be considered identical to controlling the user's font size. Font size isn't a function. Text selection is. Any true programmer would acknowledge there is a __fundamental__ difference. – arkon Oct 02 '12 at 10:10
The implication in the question is that the web designer should have ultimate control over how the document is presented to/viewed by the user. With Flash, that sort of control is possible. With plain HTML/CSS/JavaScript, it isn't. So, yes, they are fundamentally the same question: "how do I impose my will on the user with my HTML/CSS/JavaScript?" And, again, the answer is you can't and *you shouldn't*. Once the data has left your server, you have zero control over how it is ultimately presented. – James Sumners Oct 02 '12 at 12:49
ummm i think you mean if (typeof document.addEventListener.... – unsynchronized Jun 27 '16 at 04:25
This is all a moot point. CSS classes both let you define it as a designer, and the user can re-enable it with a user style sheet if they so desire. – Tim Jul 11 '16 at 13:57

score 5 · Answer 5 · edited Sep 29 '21 at 10:16

5

I'm not sure if you can turn it off, but you can change the colors of it :)

myDiv::selection,
myDiv::-moz-selection,
myDiv::-webkit-selection {
    background:#000;
    color:#fff;
}

Then just match the colors to your "darky" design and see what happens :)

edited Sep 29 '21 at 10:16

Saurin Dashadia

1,140
11
25

answered Sep 23 '10 at 14:42

Kyle

65,599
28
144
152

1

You could compress this into one CSS rule. myDiv.webkit::-webkit-selection, myDiv.moz::-moz-selection, myDiv.normal::selection{ background:#000; color:#fff; } – Yahel Sep 23 '10 at 14:44
@yc: use a multiple selector, I shall edit, thanks :) – Kyle Sep 23 '10 at 14:48
#galleryPagesNavigation a.normal::selection { background:#000; } #galleryPagesNavigation a.moz::-moz-selection { background:#000; } #galleryPagesNavigation a.webkit::-webkit-selection { background:#000; } – daviddarx Sep 23 '10 at 14:48
You have "normal" "moz" and "webkit" in there, remove those, copy the updated code out of this answer :) – Kyle Sep 23 '10 at 14:50

How do I disable text selection with CSS or JavaScript?

5 Answers5

Linked