Is there a way to make a DIV unselectable? - css

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?

Answer 1

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

Answer 2

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>

Answer 3

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';

Answer 4

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

Answer 5

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

Answer 6

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

Answer 7

you can try this:
<div onselectstart="return false">your text</div>

Answer 8

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*/
}

Answer 9

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;

Answer 10

Yes, there are multiple ways.
You could simply add the user-select CSS declaration and set it to none, like this
div {
user-select: none;
}
Also you could accomplish this with the CSS ::selection selector and set the selection background color to match your own. This could get tricky.:
p::selection {
background: rgba(0, 0, 0, 0)
}
Option 1 being the best option in most cases for obvious reasons!

Answer 11

Use
onselectstart="return false"
it prevents copying your content.

Answer 12

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.