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?

Answer 1

you can try this:

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

Answer 2

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

Answer 3

I wrote a jQuery extension to disable selection some time back. It comes in very handy for things like disabling menu item text to be selected. Follow the post on Disabling Selection in jQuery. Usage is pretty simple:

$('.button').disableSelection();

In mozilla browsers you can disable selection using CSS:

.button { -moz-user-select: 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