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

User · Answer

Wouldn t a simple background image for the textarea suffice

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

You can use pointer-events  none  in your CSS  div     pointer-events  none

User · Answer

Use  onselectstart  return false   it prevents copying your content

User · Answer

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

User · Answer

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

User · Answer

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    lt div onselectstart  return false   ondragstart  return false   gt your text lt  div gt    jQuery   var  preventDefault   function evt    evt preventDefault          div   bind  dragstart    preventDefault  bind  selectstart    preventDefault     Rich

User · Answer

you can try this    lt div onselectstart  return false  gt your text lt  div gt

User · Answer

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    lt div id  foo  unselectable  on  class  unselectable  gt     lt  div gt

User · Answer

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

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

Examples related to css