164

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?

1
  • Would you be happy with a javascript solution?
    – joshcomley
    May 29, 2009 at 8:14

12 Answers 12

236

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;
} 
3
  • @kasperTaeymans But it is in a W3C working draft... I'd include it just in case. Sep 1, 2012 at 1: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 (stackoverflow.com/questions/924916/…) with an added setting for touch interface.
    – Anne Gunn
    Jul 18, 2014 at 18:07
  • That's what I wanted for movable bootstrap modal header! Thanks!
    – NoWar
    Sep 19, 2018 at 3:24
70

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>
4
  • What's the purpose of unselectable="on". Can you give a reference please
    – user
    Apr 28, 2013 at 7:11
  • 4
    I found at here: msdn.microsoft.com/en-us/library/hh801966(v=vs.85).aspx But I actually tested on IE, and it works correctly.
    – KimKha
    May 1, 2013 at 15:27
  • 1
    I'm not sure. But <code>unselectable="on"</code> might be included on IE, and W3C validator does not accept that attribute.
    – KimKha
    Aug 20, 2013 at 13:27
  • While it works on modern browsers, it is not yet specified by W3C. Feb 22, 2014 at 15:43
51

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';
1
  • 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, 2017 at 6:04
22

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

0
22

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

div {
  pointer-events: none;
}
1
  • 1
    This is exactly what I needed to avoid my <hr/> grabbing the selection from a hidden div. Thanks!
    – Jason
    Oct 30, 2020 at 21:30
6

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

3
  • 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, 2009 at 8:22
  • Especially since a 1000x1000 transparent png (or gif) is only 4kb. May 29, 2009 at 18:02
  • More like 1 KiB, actually :-)
    – Joey
    May 29, 2009 at 23:47
5

you can try this:

<div onselectstart="return false">your text</div>
1
  • 1
    It is still possible to select with double click.
    – ceving
    Dec 14, 2015 at 17:38
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*/
}
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;
0
0

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!

-1

Use

onselectstart="return false"

it prevents copying your content.

1
  • 4
    This solution has been posted by others. Dec 9, 2014 at 9:47
-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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.