How do I disable text selection with CSS or JavaScript

Question

I am making a HTML CSS jQuery gallery  with several pages   I indeed have a  next  button  which is a simple link with a jQuery click listener   The problem is that if the user click the button several times  the text of the button is selected  and then the full line of text  In my really darky design  that is really ugly and nonsensical   So here is my question  Can you disable text selection on HTML  If not  I ll terribly miss flash and its high level of configuration on textfields

User · Answer

I m not sure if you can turn it off  but you can change the colors of it     myDiv  selection  myDiv  -moz-selection  myDiv  -webkit-selection       background  000      color  fff      Then just match the colors to your  darky  design and see what happens

User · Answer

Try this CSS code for cross-browser compatibility   -webkit-user-select  none  -khtml-user-select  none  -moz-user-select  none  -o-user-select  none  user-select  none

User · Answer

UPDATE January  2017   According to Can I use  the user-select is currently supported in all browsers except Internet nbsp Explorer 9 and earlier versions  but sadly still needs a vendor prefix      All of the correct CSS variations are    x000D   x000D   noselect   x000D    -webkit-touch-callout  none     iOS Safari    x000D      -webkit-user-select  none     Safari    x000D       -khtml-user-select  none     Konqueror HTML    x000D         -moz-user-select  none     Firefox    x000D          -ms-user-select  none     Internet Explorer Edge    x000D              user-select  none     Non-prefixed version  currently x000D                                    supported by Chrome and Opera    x000D    x000D   lt p gt  x000D    Selectable text  x000D   lt  p gt  x000D   lt p class  noselect  gt  x000D    Unselectable text  x000D   lt  p gt  x000D   x000D   x000D      Note that it s a non-standard feature  i e  not a part of any specification   It is not guaranteed to work everywhere  and there might be differences in implementation among browsers and in the future browsers can drop support for it     More information can be found in Mozilla Developer Network documentation

User · Answer

You can use JavaScript to do what you want    if  document addEventListener     undefined         Not IE   document addEventListener  click   checkSelection  false     else        IE   document attachEvent  onclick   checkSelection      function checkSelection         var sel           if  window getSelection               Mozilla         sel   window getSelection          else if  document selection               IE         sel   document selection createRange                  Mozilla     if  sel rangeCount            sel removeAllRanges            return                IE     if  sel text                 document selection empty            return            Soap box  You really shouldn t be screwing with the client s user agent in this manner  If the client wants to select things on the document  then they should be able to select things on the document  It doesn t matter if you don t like the highlight color  because you aren t the one viewing the document

User · Answer

lt div   style  -moz-user-select  none  -webkit-user-select  none  -ms-user-select none  user-select none -o-user-select none     unselectable  on   onselectstart  return false     onmousedown  return false   gt      Blabla  lt  div gt

[html] How do I disable text selection with CSS or JavaScript?

Examples related to html

Examples related to css

Examples related to cross-browser

Examples related to textselection