Is there a way to make a DIV unselectable?

Question

Here is an interesting CSS questions for you!

I have a textarea with a transparent background overlaying some TEXT that I'd like to use as a sort of watermark. The text is large and takes up a majority of the textarea. It looks nice, the problem is when the user clicks in the textarea it sometimes selects the watermark text instead. I want the watermark text to never be selectable. I was expecting if something was lower in the z-index it would not be selectable but browsers don't seem to care about z-index layers when selecting items. Is there a trick or way to make it so this DIV is never selectable?

Would you be happy with a javascript solution? – joshcomley May 29 '09 at 08:14 — joshcomley, May 29 '09 at 08:14

aleemb · Answer 1 · 2016-02-10T05:58:01.677

231

I wrote a simple jQuery extension to disable selection some time back: Disabling Selection in jQuery. You can invoke it through $('.button').disableSelection();

Alternately, using CSS (cross-browser):

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

edited Feb 10 '16 at 05:58

answered May 29 '09 at 08:17

aleemb

29,883
18
95
112

@kasperTaeymans thanks for pointing that out. updated the snippet. – aleemb Dec 19 '11 at 09:50
@kasperTaeymans But it is in a [W3C working draft](http://www.w3.org/TR/2000/WD-css3-userint-20000216#user-select)... I'd include it just in case. – Camilo Martin Sep 01 '12 at 01:20
2

Not to take anything away from the original answer, which I upvoted, but it is 3+ years old. So I added an answer below (http://stackoverflow.com/questions/924916/is-there-a-way-to-make-a-div-unselectable/24831222#24831222) with an added setting for touch interface. – Anne Gunn Jul 18 '14 at 18:07
That's what I wanted for movable bootstrap modal header! Thanks! – NoWar Sep 19 '18 at 03:24

score 69 · Answer 2 · answered Apr 07 '11 at 13:37

69

The following CSS code works almost modern browser:

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

For IE, you must use JS or insert attribute in html tag.

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

answered Apr 07 '11 at 13:37

KimKha

4,230
1
36
44

What's the purpose of `unselectable="on"`. Can you give a reference please – user Apr 28 '13 at 07:11
4

I found at here: http://msdn.microsoft.com/en-us/library/hh801966(v=vs.85).aspx But I actually tested on IE, and it works correctly. – KimKha May 01 '13 at 15:27
1

I'm not sure. But unselectable="on" might be included on IE, and W3C validator does not accept that attribute. – KimKha Aug 20 '13 at 13:27
While it works on modern browsers, it is not yet specified by W3C. – Ciro Santilli Путлер Капут 六四事 Feb 22 '14 at 15:43

Anne Gunn · Answer 3 · 2015-04-08T21:36:37.420

Just updating aleemb's original, much-upvoted answer with a couple of additions to the css.

We've been using the following combo:

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

We got the suggestion for adding the webkit-touch entry from:
http://phonegap-tips.com/articles/essential-phonegap-css-webkit-touch-callout.html

2015 Apr: Just updating my own answer with a variation that may come in handy. If you need to make the DIV selectable/unselectable on the fly and are willing to use Modernizr, the following works neatly in javascript:

    var userSelectProp = Modernizr.prefixed('userSelect');
    var specialDiv = document.querySelector('#specialDiv');
    specialDiv.style[userSelectProp] = 'none';

applying `user-select: none` to a `div` has no effect whatsoever. i'm pretty sure `user-select` is for text only. are there any other ways to make a `div` unselectable? — oldboy, May 18 '17 at 06:04

kim3er · Answer 4 · 2011-04-25T18:07:38.323

As Johannes has already suggested, a background-image is probally the best way to achieve this in CSS alone.

A JavaScript solution would also have to affect "dragstart" to be effective across all popular browsers.

JavaScript:

<div onselectstart="return false;" ondragstart="return false;">your text</div>

jQuery:

var _preventDefault = function(evt) { evt.preventDefault(); };
$("div").bind("dragstart", _preventDefault).bind("selectstart", _preventDefault);

Rich

score 20 · Answer 5 · answered Nov 23 '14 at 07:02

20

You can use pointer-events: none; in your CSS

div {
  pointer-events: none;
}

answered Nov 23 '14 at 07:02

Linh Dam

1,743
1
16
17

1

This is exactly what I needed to avoid my
grabbing the selection from a hidden div. Thanks! – Jason Oct 30 '20 at 21:30

score 6 · Answer 6 · answered May 29 '09 at 08:15

6

Wouldn't a simple background image for the textarea suffice?

answered May 29 '09 at 08:15

Joey

330,812
81
665
668

1

Well, I rather meant the watermark, but a transparent background image might work as well. Also you shouldn't tile very small images as some browsers get abysmally slow in that case :) – Joey May 29 '09 at 08:22
Especially since a 1000x1000 transparent png (or gif) is only 4kb. – Ryan Florence May 29 '09 at 18:02
More like 1 KiB, actually :-) – Joey May 29 '09 at 23:47

score 5 · Answer 7 · answered May 29 '09 at 08:13

5

you can try this:

<div onselectstart="return false">your text</div>

answered May 29 '09 at 08:13

Fortega

19,153
14
74
112

1

It is still possible to select with double click. – ceving Dec 14 '15 at 17:38

score 4 · Answer 8 · answered Dec 11 '10 at 11:30

4

WebKit browsers (ie Google Chrome and Safari) have a CSS solution similar to Mozilla's -moz-user-select:none

.no-select{    
    -webkit-user-select: none;
    cursor:not-allowed; /*makes it even more obvious*/
}

answered Dec 11 '10 at 11:30

James

4,017
2
17
13

Artjom Kurapov · Answer 9 · 2013-04-17T09:04:34.873

2

Also in IOS if you want to get rid of gray semi-transparent overlays appearing ontouch, add css:

-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-touch-callout: none;

edited Apr 17 '13 at 09:04

answered Apr 17 '13 at 08:31

Artjom Kurapov

6,023
3
30
42

score -1 · Answer 10 · answered Dec 09 '14 at 09:26

-1

Use

onselectstart="return false"

it prevents copying your content.

answered Dec 09 '14 at 09:26

Anuraj

2,383
20
26

4

This solution has been posted by others. – dazedconfused Dec 09 '14 at 09:47

score -1 · Answer 11 · answered Mar 18 '15 at 21:11

-1

Make sure that you set position explicitly as absolute or relative for z-index to work for selection. I had a similar issue and this solved it for me.

answered Mar 18 '15 at 21:11

Eric Grotke

3,903
2
20
19

score -4 · Answer 12 · answered Jul 02 '16 at 16:53

-4

Not sure of your use case, but you could make it draggable.

answered Jul 02 '16 at 16:53

Costa Michailidis

7,107
14
64
114

1

Its an unpleasant yet valid answer. – Rusty Sep 26 '19 at 12:39

Is there a way to make a DIV unselectable?

12 Answers12

Linked

Related