How to make HTML Text unselectable

Question

I would like to add text to my webpage as a label and make it unselectable   In other words  When the mouse cursor is over the text I would like it to not turn into a text selecting cursor at all   A good example of what I m trying to achieve is the buttons on this website  Questions Tags Users

User · Answer

No one here posted an answer with all of the correct CSS variations  so here it is   -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

You can t do this with plain vanilla HTML  so JSF can t do much for you here as well   If you re targeting decent browsers only  then just make use of CSS3    unselectable       -webkit-touch-callout  none      -webkit-user-select  none      -khtml-user-select  none      -moz-user-select  none      -ms-user-select  none      user-select  none       lt label class  unselectable  gt Unselectable label lt  label gt    If you d like to cover older browsers as well  then consider this JavaScript fallback    lt  doctype html gt   lt html lang  en  gt       lt head gt           lt title gt SO question 2310734 lt  title gt           lt script gt              window onload   function                     var labels   document getElementsByTagName  label                    for  var i   0  i  lt  labels length  i                          disableSelection labels i                                                 function disableSelection element                    if  typeof element onselectstart     undefined                         element onselectstart   function     return false                       else if  typeof element style MozUserSelect     undefined                         element style MozUserSelect    none                     else                       element onmousedown   function     return false                                              lt  script gt       lt  head gt       lt body gt           lt label gt Try to select this lt  label gt       lt  body gt   lt  html gt    If you re already using jQuery  then here s another example which adds a new function disableSelection   to jQuery so that you can use it anywhere in your jQuery code    lt  doctype html gt   lt html lang  en  gt       lt head gt           lt title gt SO question 2310734 with jQuery lt  title gt           lt script src  http   code jquery com jquery-latest min js  gt  lt  script gt           lt script gt                fn extend                    disableSelection  function                          this each function                              if  typeof this onselectstart     undefined                                 this onselectstart   function     return false                               else if  typeof this style MozUserSelect     undefined                                 this style MozUserSelect    none                             else                               this onmousedown   function     return false                                                                                                          document  ready function                        label   disableSelection                                         lt  script gt       lt  head gt       lt body gt           lt label gt Try to select this lt  label gt       lt  body gt   lt  html gt

User · Answer

The full modern solution to your problem is purely CSS-based  but note that older browsers won t support it  in which cases you d need to fallback to solutions such as the others have provided    So in pure CSS   -webkit-user-select  none  -khtml-user-select  none  -moz-user-select  none  -ms-user-select  none  -o-user-select  none  user-select  none    However the mouse cursor will still change to a caret when over the element s text  so you add to that   cursor  default    Modern CSS is pretty elegant

User · Answer

I altered the jQuery plugin posted above so it would work on live elements    function         fn disableSelection   function          return this each function              if  typeof this onselectstart     undefined                 this onselectstart   function     return false               else if  typeof this style MozUserSelect     undefined                 this style MozUserSelect    none             else               this onmousedown   function     return false                             jQuery     Then you could so something like     document  ready function            label   disableSelection            Or to make everything unselectable            disableSelection

[html] How to make HTML Text unselectable

Examples related to html

Examples related to css

Examples related to cross-browser

Examples related to highlighting

Examples related to textselection