[css] Is there a way to make a DIV unselectable?

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?

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;

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>

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

Use

onselectstart="return false"

it prevents copying your content.

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

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

you can try this:

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

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.

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

div {
  pointer-events: none;
}

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

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

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