CODEWITHSUNDEEP
css
Whozumommy
Whozumommy

Reputation: 3253

Is there a way to make a DIV unselectable?

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, but 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?

Upvotes: 170

Views: 216210

Answers (12)

Anuraj
Anuraj

Reputation: 2749

Use

onselectstart="return false"

It prevents copying your content.

Upvotes: -2

James
James

Reputation: 4152

WebKit browsers (i.e., 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 */
}

Upvotes: 5

Anne Gunn
Anne Gunn

Reputation: 2447

An update aleemb's original, much-upvoted answer with a couple of additions to the CSS

We've been using the following combination:

.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: Essential PhoneGap CSS: WebKit Touch Callout

2015 Apr: Here is 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';

Upvotes: 56

Artjom Kurapov
Artjom Kurapov

Reputation: 6155

Also in iOS if you want to get rid of gray semi-transparent overlays appearing ontouch, add this CSS content:

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

Upvotes: 2

KimKha
KimKha

Reputation: 4510

The following CSS code works in almost all modern browsers:

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

For Internet Explorer, you must use JavaScript or insert an attribute in the HTML tag.

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

Upvotes: 74

kim3er
kim3er

Reputation: 6466

As Johannes has already suggested, a background image is probably 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);

Upvotes: 22

aleemb
aleemb

Reputation: 32065

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

Upvotes: 248

Joey
Joey

Reputation: 354416

A simple background image for the textarea may suffice.

Upvotes: 6

Fortega
Fortega

Reputation: 19682

You can try this:

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

Upvotes: 5

Cullen Carstens
Cullen Carstens

Reputation: 31

Yes, there are multiple ways.

  1. You could simply add the user-select CSS declaration and set it to none, like this

    div {
    user-select: none;
}

  2. 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!

Upvotes: 1

Eric Grotke
Eric Grotke

Reputation: 5125

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.

Upvotes: -1

Linh Dam
Linh Dam

Reputation: 2219

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

div {
  pointer-events: none;
}

Upvotes: 25

Related Questions