Is there a way to make text unselectable on an HTML page

Question

I m building an HTML UI with some text elements  such as tab names  which look bad when selected  Unfortunately  it s very easy for a user to double-click a tab name  which selects it by default in many browsers   I might be able to solve this with a JavaScript trick  I d like to see those answers  too  -- but I m really hoping there s something in CSS HTML directly that works across all browsers

User · Answer

For an example of why it might be desirable to suppress selection  see SIMILE TImeline  which uses drag-and-drop to explore  the timeline  during which accidental vertical mouse movement causes the labels to be highlighted unexpectedly  which looks weird

User · Answer

lt script type  text javascript  gt                                                      Disable Text Selection script-    Dynamic Drive DHTML code library  www dynamicdrive com    This notice MUST stay intact for legal use   Visit Dynamic Drive at http   www dynamicdrive com  for full source code                                                     function disableSelection target        if  typeof target onselectstart   undefined     IE route         target onselectstart function   return false       else if  typeof target style MozUserSelect   undefined     Firefox route         target style MozUserSelect  none       else   All other route  ie  Opera          target onmousedown function   return false       target style cursor    default         Sample usages   disableSelection document body    Disable text selection on entire body   disableSelection document getElementById  mydiv      Disable text selection on element with id  mydiv     lt  script gt    EDIT  Code apparently comes from http   www dynamicdrive com

User · Answer

For Safari  -khtml-user-select  none  just like Mozilla s -moz-user-select  or  in JavaScript  target style KhtmlUserSelect  none

User · Answer

If your content is really interesting  then there is little you can   ultimately do to protect it    That s true  but most copying  in my experience  has nothing to do with  ultimately  or geeks or determined plagiarists or anything like that  It s usually casual copying by clueless people  and even a simple  easily defeated protection  easily defeated by folks like us  that is  works quite well to stop them  They don t know anything about  view source  or caches or anything else    heck  they don t even know what a web browser is or that they re using one

User · Answer

Absolutely position divs over the text area with a z-index higher and give these divs a transparent GIF background graphic   Note after a bit more thought - You d need to have these  covers  be linked so clicking on them would take you to where the tab was supposed to  which means you could should do this with the anchor element set to display box  width and height set as well as the transparent background image

User · Answer

Here s a Sass mixin  scss  for those interested  Compass CSS nbsp 3 doesn t seem to have a user-select mixin       usage use within a rule    ex  img   include user-select none        param assumed valid user-select value  mixin user-select  value         amp            -webkit-touch-callout   value          -webkit-user-select   value          -khtml-user-select   value          -moz-user-select   value          -ms-user-select   value          user-select   value            Though Compass would do it in a more robust way  i e  only add support for vendors you ve chosen

User · Answer

In most browsers  this can be achieved using CSS     unselectable      -moz-user-select  -moz-none     -khtml-user-select  none     -webkit-user-select  none              Introduced in IE 10       See http   ie microsoft com testdrive HTML5 msUserSelect           -ms-user-select  none     user-select  none      For IE  lt  10 and Opera  you will need to use the unselectable attribute of the element you wish to be unselectable  You can set this using an attribute in HTML    lt div id  foo  unselectable  on  class  unselectable  gt     lt  div gt    Sadly this property isn t inherited  meaning you have to put an attribute in the start tag of every element inside the  lt div gt   If this is a problem  you could instead use JavaScript to do this recursively for an element s descendants   function makeUnselectable node        if  node nodeType    1            node setAttribute  unselectable    on              var child   node firstChild      while  child            makeUnselectable child           child   child nextSibling           makeUnselectable document getElementById  foo

User · Answer

There are many occasions when turning off selectability enhances the user experience   For instance allowing the user to copy a block of text on the page without copying the text of any interface elements associated with it  that would become interspersed within the text being copied

User · Answer

I m finding some level of success with the CSS described here http   www quirksmode org css selection html     selection       background-color  transparent      It took care of most of the issues I was having with some ThemeRoller ul elements in an AIR application  WebKit engine   Still getting a small  approx  15 x 15  patch of nothingness that gets selected  but half the page was being selected before

User · Answer

For Safari  -khtml-user-select  none  just like Mozilla s -moz-user-select  or  in JavaScript  target style KhtmlUserSelect  none

User · Answer

Any JavaScript or CSS method is easily circumvented with Firebug  like Flickr s case    You can use the   selection pseudo-element in CSS to alter the highlight color   If the tabs are links and the dotted rectangle in active state is of concern  you can remove that too  consider usability of course

User · Answer

Images can be selected too   There are limits to using JavaScript to deselect text  as it might happen even in places where you want to select  To ensure a rich and successful career  steer clear of all requirements that need ability to influence or manage the browser beyond the ordinary    unless  of course  they are paying you extremely well

User · Answer

Absolutely position divs over the text area with a z-index higher and give these divs a transparent GIF background graphic   Note after a bit more thought - You d need to have these  covers  be linked so clicking on them would take you to where the tab was supposed to  which means you could should do this with the anchor element set to display box  width and height set as well as the transparent background image

User · Answer

For an example of why it might be desirable to suppress selection  see SIMILE TImeline  which uses drag-and-drop to explore  the timeline  during which accidental vertical mouse movement causes the labels to be highlighted unexpectedly  which looks weird

User · Answer

Absolutely position divs over the text area with a z-index higher and give these divs a transparent GIF background graphic   Note after a bit more thought - You d need to have these  covers  be linked so clicking on them would take you to where the tab was supposed to  which means you could should do this with the anchor element set to display box  width and height set as well as the transparent background image

User · Answer

Try this    lt div onselectstart  return false  gt some stuff lt  div gt    Simple  but effective    works in current versions of all major browsers

User · Answer

If it looks bad you can use CSS to change the appearance of selected sections

User · Answer

lt script type  text javascript  gt                                                      Disable Text Selection script-    Dynamic Drive DHTML code library  www dynamicdrive com    This notice MUST stay intact for legal use   Visit Dynamic Drive at http   www dynamicdrive com  for full source code                                                     function disableSelection target        if  typeof target onselectstart   undefined     IE route         target onselectstart function   return false       else if  typeof target style MozUserSelect   undefined     Firefox route         target style MozUserSelect  none       else   All other route  ie  Opera          target onmousedown function   return false       target style cursor    default         Sample usages   disableSelection document body    Disable text selection on entire body   disableSelection document getElementById  mydiv      Disable text selection on element with id  mydiv     lt  script gt    EDIT  Code apparently comes from http   www dynamicdrive com

User · Answer

If it looks bad you can use CSS to change the appearance of selected sections

User · Answer

lt script type  text javascript  gt                                                      Disable Text Selection script-    Dynamic Drive DHTML code library  www dynamicdrive com    This notice MUST stay intact for legal use   Visit Dynamic Drive at http   www dynamicdrive com  for full source code                                                     function disableSelection target        if  typeof target onselectstart   undefined     IE route         target onselectstart function   return false       else if  typeof target style MozUserSelect   undefined     Firefox route         target style MozUserSelect  none       else   All other route  ie  Opera          target onmousedown function   return false       target style cursor    default         Sample usages   disableSelection document body    Disable text selection on entire body   disableSelection document getElementById  mydiv      Disable text selection on element with id  mydiv     lt  script gt    EDIT  Code apparently comes from http   www dynamicdrive com

User · Answer

Images can be selected too   There are limits to using JavaScript to deselect text  as it might happen even in places where you want to select  To ensure a rich and successful career  steer clear of all requirements that need ability to influence or manage the browser beyond the ordinary    unless  of course  they are paying you extremely well

User · Answer

For Firefox you can apply the CSS declaration  -moz-user-select  to  none   Check out their documentation  user-select   It s a  preview  of the future  user-select  as they say  so maybe Opera or WebKit-based browsers will support that  I also recall finding something for Internet nbsp Explorer  but I don t remember what      Anyway  unless it s a specific situation where text-selecting makes some dynamic functionality fail  you shouldn t really override what users are expecting from a webpage  and that is being able to select any text they want

User · Answer

Try this    lt div onselectstart  return false  gt some stuff lt  div gt    Simple  but effective    works in current versions of all major browsers

User · Answer

Images can be selected too   There are limits to using JavaScript to deselect text  as it might happen even in places where you want to select  To ensure a rich and successful career  steer clear of all requirements that need ability to influence or manage the browser beyond the ordinary    unless  of course  they are paying you extremely well

User · Answer

If it looks bad you can use CSS to change the appearance of selected sections

User · Answer

Absolutely position divs over the text area with a z-index higher and give these divs a transparent GIF background graphic   Note after a bit more thought - You d need to have these  covers  be linked so clicking on them would take you to where the tab was supposed to  which means you could should do this with the anchor element set to display box  width and height set as well as the transparent background image

User · Answer

lt script type  text javascript  gt                                                      Disable Text Selection script-    Dynamic Drive DHTML code library  www dynamicdrive com    This notice MUST stay intact for legal use   Visit Dynamic Drive at http   www dynamicdrive com  for full source code                                                     function disableSelection target        if  typeof target onselectstart   undefined     IE route         target onselectstart function   return false       else if  typeof target style MozUserSelect   undefined     Firefox route         target style MozUserSelect  none       else   All other route  ie  Opera          target onmousedown function   return false       target style cursor    default         Sample usages   disableSelection document body    Disable text selection on entire body   disableSelection document getElementById  mydiv      Disable text selection on element with id  mydiv     lt  script gt    EDIT  Code apparently comes from http   www dynamicdrive com

User · Answer

If it looks bad you can use CSS to change the appearance of selected sections

User · Answer

All of the correct CSS variations are   -webkit-touch-callout  none  -webkit-user-select  none  -khtml-user-select  none  -moz-user-select  none  -ms-user-select  none  user-select  none

User · Answer

The following works in Firefox interestingly enough if I remove the write line it doesn t work  Anyone have any insight why the write line is needed    lt script type  text javascript  gt  document write       document body style MozUserSelect  none    lt  script gt

User · Answer

In most browsers  this can be achieved using CSS     unselectable      -moz-user-select  -moz-none     -khtml-user-select  none     -webkit-user-select  none              Introduced in IE 10       See http   ie microsoft com testdrive HTML5 msUserSelect           -ms-user-select  none     user-select  none      For IE  lt  10 and Opera  you will need to use the unselectable attribute of the element you wish to be unselectable  You can set this using an attribute in HTML    lt div id  foo  unselectable  on  class  unselectable  gt     lt  div gt    Sadly this property isn t inherited  meaning you have to put an attribute in the start tag of every element inside the  lt div gt   If this is a problem  you could instead use JavaScript to do this recursively for an element s descendants   function makeUnselectable node        if  node nodeType    1            node setAttribute  unselectable    on              var child   node firstChild      while  child            makeUnselectable child           child   child nextSibling           makeUnselectable document getElementById  foo

User · Answer

If your content is really interesting  then there is little you can   ultimately do to protect it    That s true  but most copying  in my experience  has nothing to do with  ultimately  or geeks or determined plagiarists or anything like that  It s usually casual copying by clueless people  and even a simple  easily defeated protection  easily defeated by folks like us  that is  works quite well to stop them  They don t know anything about  view source  or caches or anything else    heck  they don t even know what a web browser is or that they re using one

User · Answer

Here s a Sass mixin  scss  for those interested  Compass CSS nbsp 3 doesn t seem to have a user-select mixin       usage use within a rule    ex  img   include user-select none        param assumed valid user-select value  mixin user-select  value         amp            -webkit-touch-callout   value          -webkit-user-select   value          -khtml-user-select   value          -moz-user-select   value          -ms-user-select   value          user-select   value            Though Compass would do it in a more robust way  i e  only add support for vendors you ve chosen

User · Answer

The following works in Firefox interestingly enough if I remove the write line it doesn t work  Anyone have any insight why the write line is needed    lt script type  text javascript  gt  document write       document body style MozUserSelect  none    lt  script gt

User · Answer

Any JavaScript or CSS method is easily circumvented with Firebug  like Flickr s case    You can use the   selection pseudo-element in CSS to alter the highlight color   If the tabs are links and the dotted rectangle in active state is of concern  you can remove that too  consider usability of course

User · Answer

For Firefox you can apply the CSS declaration  -moz-user-select  to  none   Check out their documentation  user-select   It s a  preview  of the future  user-select  as they say  so maybe Opera or WebKit-based browsers will support that  I also recall finding something for Internet nbsp Explorer  but I don t remember what      Anyway  unless it s a specific situation where text-selecting makes some dynamic functionality fail  you shouldn t really override what users are expecting from a webpage  and that is being able to select any text they want

User · Answer

Images can be selected too   There are limits to using JavaScript to deselect text  as it might happen even in places where you want to select  To ensure a rich and successful career  steer clear of all requirements that need ability to influence or manage the browser beyond the ordinary    unless  of course  they are paying you extremely well

User · Answer

There are many occasions when turning off selectability enhances the user experience   For instance allowing the user to copy a block of text on the page without copying the text of any interface elements associated with it  that would become interspersed within the text being copied

User · Answer

Try this    lt div onselectstart  return false  gt some stuff lt  div gt    Simple  but effective    works in current versions of all major browsers

User · Answer

I m finding some level of success with the CSS described here http   www quirksmode org css selection html     selection       background-color  transparent      It took care of most of the issues I was having with some ThemeRoller ul elements in an AIR application  WebKit engine   Still getting a small  approx  15 x 15  patch of nothingness that gets selected  but half the page was being selected before

User · Answer

For an example of why it might be desirable to suppress selection  see SIMILE TImeline  which uses drag-and-drop to explore  the timeline  during which accidental vertical mouse movement causes the labels to be highlighted unexpectedly  which looks weird

User · Answer

All of the correct CSS variations are   -webkit-touch-callout  none  -webkit-user-select  none  -khtml-user-select  none  -moz-user-select  none  -ms-user-select  none  user-select  none

User · Answer

Try this    lt div onselectstart  return false  gt some stuff lt  div gt    Simple  but effective    works in current versions of all major browsers

User · Answer

For an example of why it might be desirable to suppress selection  see SIMILE TImeline  which uses drag-and-drop to explore  the timeline  during which accidental vertical mouse movement causes the labels to be highlighted unexpectedly  which looks weird

User · Answer

For Firefox you can apply the CSS declaration  -moz-user-select  to  none   Check out their documentation  user-select   It s a  preview  of the future  user-select  as they say  so maybe Opera or WebKit-based browsers will support that  I also recall finding something for Internet nbsp Explorer  but I don t remember what      Anyway  unless it s a specific situation where text-selecting makes some dynamic functionality fail  you shouldn t really override what users are expecting from a webpage  and that is being able to select any text they want

User · Answer

For Firefox you can apply the CSS declaration  -moz-user-select  to  none   Check out their documentation  user-select   It s a  preview  of the future  user-select  as they say  so maybe Opera or WebKit-based browsers will support that  I also recall finding something for Internet nbsp Explorer  but I don t remember what      Anyway  unless it s a specific situation where text-selecting makes some dynamic functionality fail  you shouldn t really override what users are expecting from a webpage  and that is being able to select any text they want

[javascript] Is there a way to make text unselectable on an HTML page?

Examples related to javascript

Examples related to html

Examples related to css

Examples related to cross-browser

Examples related to textselection