How to disable text selection highlighting

Question

For anchors that act like buttons  for example Questions  Tags  Users  etc  which are located on the top of the Stack  Overflow page  or tabs  is there a CSS standard way to disable the highlighting effect if the user accidentally selects the text  I realize that this could be done with JavaScript and a little googling yielded the Mozilla-only -moz-user-select option  Is there a standard-compliant way to accomplish this with CSS  and if not  what is the  quot best practice quot  approach

User · Answer

You can use a  -user-select property as below for that     p       -webkit-user-select  none      Chrome all and Safari all        -moz-user-select  none         Firefox all        -ms-user-select  none          Internet Explorer 10 and later        user-select  none              Likely future        Link for the Detailed Description

User · Answer

Even better  you can disable text selection   If you like Sass  SCSS   and you don t want to use Compass you can do this   styles scss   mixin user-select  select        -webkit-touch-callout    select        each  pre in -webkit-  -moz-  -ms-  -o-  -khtml-              pre   user-select      select               user-select      select       no-select        include user-select none

User · Answer

Suppose there are two divs like this    x000D   x000D   second   x000D    cursor  default  x000D    user-select  none  x000D    -webkit-user-select  none  x000D       Chrome Safari Opera    x000D    -moz-user-select  none  x000D       Firefox    x000D    -ms-user-select  none  x000D       Internet Explorer Edge    x000D    -webkit-touch-callout  none  x000D       iOS Safari    x000D    x000D   lt div class  first  gt  x000D    This is my first div x000D   lt  div gt  x000D   x000D   lt div class  second  gt  x000D    This is my second div x000D   lt  div gt  x000D   x000D   x000D    Set cursor to default so that it will give a unselectable feel to the user      Prefix need to be used to support it in all browsers  Without a prefix this may not work in all the answers

User · Answer

Maybe you can use this solution through  before    x000D   x000D  nav li   x000D      display  inline-block  x000D      position  relative  x000D    x000D   x000D  nav li a   x000D      display  inline-block  x000D      padding  10px 20px  x000D    x000D   x000D  nav li a hover   x000D      color  red  x000D    x000D   x000D  nav li disabled before   x000D      content      x000D      position  absolute  x000D      top  0  x000D      left  0  x000D      bottom  0  x000D      right  0  x000D    x000D   lt nav gt  x000D       lt ul gt  x000D       lt li gt  lt a href     gt Link lt  a gt  lt  li gt  x000D       lt li class  disabled  gt  lt a href     gt Link lt  a gt  lt  li gt  x000D       lt li gt  lt a href     gt Link lt  a gt  lt  li gt  x000D       lt  ul gt  x000D   lt  nav gt  x000D   x000D   x000D    JsFiddle - https   jsfiddle net grinmax  9L1cckxu

User · Answer

You may also want to prevent the context menu appearing when touching elements like buttons that have their selection prevented  To do that  add this code to the entire page  or just those button elements      body   on  contextmenu  function e       return false

User · Answer

This is not CSS  but it is worth a mention   jQuery UI Disable Selection      your selector   disableSelection

User · Answer

I have learned from the CSS-Tricks website   user-select  none    And this also     selection       background-color  transparent       moz-selection       background-color  transparent       webkit-selection       background-color  transparent

User · Answer

For Internet Explorer in addition  you need to add pseudo class focus   ClassName focus  and outline-style  none    ClassName   ClassName focus       -webkit-touch-callout  none      -webkit-user-select  none      -khtml-user-select  none      -moz-user-select  none      -ms-user-select  none      user-select  none      outline-style  none     Internet Explorer

User · Answer

-webkit-user-select  none  -khtml-user-select  none  -moz-user-select  none  -o-user-select  none  user-select  none     unselectable      -moz-user-select  -moz-none     -khtml-user-select  none     -webkit-user-select  none     user-select  none       lt div id  foo  unselectable  on  class  unselectable  gt     lt  div gt    function makeUnselectable node        if  node nodeType    1            node unselectable   true            var child   node firstChild      while  child            makeUnselectable child           child   child nextSibling           makeUnselectable document getElementById  foo       -webkit-user-select  none  -moz-user-select  none    onselectstart  return false       selection        background  transparent        -moz-selection        background  transparent              -webkit-user-select  none      -khtml-user-select  none      -moz-user-select  -moz-none      -o-user-select  none      user-select  none     p       -webkit-user-select  text      -khtml-user-select  text      -moz-user-select  text      -o-user-select  text      user-select  text       lt div class  draggable  gt  lt  div gt     draggable       -webkit-user-select  none      -khtml-user-select  none      -moz-user-select  none      -o-user-select  none      user-select  none      draggable input       -webkit-user-select  text      -khtml-user-select  text      -moz-user-select  text      -o-user-select  text      user-select  text       if    browser msie          draggable   find   not input    attr  unselectable    on

User · Answer

With CSS-   x000D   x000D  div   x000D    -moz-user-select  none  x000D    -webkit-user-select  none  x000D    -ms-user-select  none  x000D    user-select  none  x000D    -o-user-select  none  x000D   x000D     unselectable  on  onselectstart  return false   x000D    onmousedown  return false  x000D    x000D   lt div gt  x000D    Blabla x000D     lt br  gt  More Blabla x000D     lt br  gt  More Blabla    x000D   lt  div gt  x000D   x000D   x000D

User · Answer

To get the result I needed  I found I had to use both   selection and user-select  input no-select focus       -webkit-touch-callout  none      -webkit-user-select  none      -khtml-user-select  none      -moz-user-select  none      -ms-user-select  none      user-select  none     input no-select  selection       background  transparent     input no-select  -moz-selection       background  transparent

User · Answer

Working  CSS   -khtml-user-select  none  -moz-user-select  none  -ms-user-select  none  user-select  none  -webkit-touch-callout  none  -webkit-user-select  none    This should work  but it won t work for the old browsers  There is a browser compatibility issue

User · Answer

Though this pseudo-element was in drafts of CSS Selectors Level 3  it was removed during the Candidate Recommendation phase  as it appeared that its behavior was under-specified  especially with nested elements  and interoperability wasn t achieved   It s being discussed in How   selection works on nested elements   Despite it is being implemented in browsers  you can make an illusion of text not being selected by using the same color and background color on selection as of the tab design  in your case    Normal CSS Design  p   color  white   background  black      On selection  p  -moz-selection   color  white   background  black    p  selection        color  white   background  black      Disallowing users to select the text will raise usability issues

User · Answer

Try to insert these rows into the CSS and call the  disHighlight  at class property    disHighlight       user-select  none      -webkit-user-select  none      -ms-user-select  none      -webkit-touch-callout  none      -o-user-select  none      -moz-user-select  none

User · Answer

Add a class to your CSS that defines you cannot select or highlight an element  I have an example    lt style gt        no highlighting          user-select  none              anchor without decoration hover          text-decoration-style  none         lt  style gt    lt a href     class  anchor without decoration no highlighting  gt Anchor text lt  a gt

User · Answer

Add this to the first div in which you want to disable the selection for text   onmousedown  return false    onselectstart  return false

User · Answer

In most browsers  this can be achieved using proprietary variations on the CSS user-select property  originally proposed and then abandoned in CSS nbsp 3 and now proposed in CSS UI Level 4     unselectable      -moz-user-select  none     -khtml-user-select  none     -webkit-user-select  none              Introduced in Internet Explorer 10       See http   ie microsoft com testdrive HTML5 msUserSelect           -ms-user-select  none     user-select  none      For Internet Explorer  lt  10 and Opera  lt  15  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         Update 30 April 2014  This tree traversal needs to be rerun whenever a new element is added to the tree  but it seems from a comment by  Han that it is possible to avoid this by adding a mousedown event handler that sets unselectable on the target of the event  See http   jsbin com yagekiji 1 for details     This still doesn t cover all possibilities  While it is impossible to initiate selections in unselectable elements  in some browsers  Internet nbsp Explorer and Firefox  for example  it s still impossible to prevent selections that start before and end after the unselectable element without making the whole document unselectable

User · Answer

lt script type  text javascript  gt   if typeof document onselectstart   undefined    document onselectstart new Function   return false      else  document onmousedown  new Function   return false    document onmouseup  new Function   return true       lt  script gt

User · Answer

Until CSS 3 s user-select property becomes available  Gecko-based browsers support the -moz-user-select property you already found  WebKit and Blink-based browsers support the -webkit-user-select property   This of course is not supported in browsers that do not use the Gecko rendering engine   There is no  standards  compliant quick-and-easy way to do it  using JavaScript is an option   The real question is  why do you want users to not be able to highlight and presumably copy and paste certain elements  I have not come across a single time that I wanted to not let users highlight a certain portion of my website  Several of my friends  after spending many hours reading and writing code will use the highlight feature as a way to remember where on the page they were  or providing a marker so that their eyes know where to look next   The only place I could see this being useful is if you have buttons for forms that should not be copy and pasted if a user copy and pasted the website

User · Answer

This will be useful if color selection is also not needed     -moz-selection   background none  color none      selection   background none  color none         all other browser fixes  It will work in Internet nbsp Explorer nbsp 9 or later

User · Answer

This highlighting effect is due to the action called hover  onMouseHover   When you will hover on any tab its color will be changed  Just say for example  HTML code  lt div class  quot menu quot  gt       lt ul class  quot effect quot  gt           lt li gt Questions lt  li gt           lt li gt JOBS lt  li gt           lt li gt Users lt  li gt       lt  ul gt   lt  div gt   CSS code  effect hover       color  none     You can use any color if you want to get it highlighted  Else you can use none

User · Answer

Try to use this one     selection       background  transparent      And if you wish to specify not select inside a specific element  just put the element class or id before the selection rule  such as    ClassNAME  selection       background  transparent     IdNAME  selection       background  transparent

User · Answer

I combined the various browser CSS select attributes with the unselectable tag required for Internet nbsp Explorer  lt  9    lt style gt   unselectable  on         -webkit-user-select  none     Safari        -moz-user-select  none     Firefox        -ms-user-select  none     Internet Explorer 10  Edge        user-select  none     Standard       lt  style gt   lt div unselectable  on  gt Unselectable Text lt  div gt

User · Answer

Aside from the Mozilla-only property  no  there is no way to disable text selection with just standard CSS  as of now    If you notice  Stack Overflow doesn t disable text selection for their navigation buttons  and I would recommend against doing so in most cases  since it modifies normal selection behavior and makes it conflict with a user s expectations

User · Answer

NOTE   The correct answer is correct in that it prevents you from being able to select the text  However  it does not prevent you from being able to copy the text  as I ll show with the next couple of screenshots  as of 7th Nov 2014          As you can see  we were unable to select the numbers  but we were able to copy them   Tested on  Ubuntu  Google Chrome 38 0 2125 111

User · Answer

Did you tried this   disableSelect      user-select  none      -webkit-user-select  none      -ms-user-select  none      -webkit-touch-callout  none      -o-user-select  none      -moz-user-select  none       pointer-events none

User · Answer

You can use CSS or JavaScript for that   The JavaScript way is supported in older browsers  like old versions of Internet nbsp Explorer as well  but if it s not your case  use the CSS way then   HTML JavaScript    x000D   x000D   lt html onselectstart  return false   gt  x000D     lt body gt  x000D       lt h1 gt This is the Heading  lt  h1 gt  x000D       lt p gt And I m the text  I won t be selected if you select me  lt  p gt  x000D     lt  body gt  x000D   lt  html gt  x000D   x000D   x000D    HTML CSS    x000D   x000D   not-selectable   x000D    -webkit-touch-callout  none  x000D    -webkit-user-select  none  x000D    -khtml-user-select  none  x000D    -moz-user-select  none  x000D    -ms-user-select  none  x000D    user-select  none  x000D    x000D   lt body class  not-selectable  gt  x000D     lt h1 gt This is the Heading  lt  h1 gt  x000D     lt p gt And I m the text  I won t be selected if you select me  lt  p gt  x000D   lt  body gt  x000D   x000D   x000D

User · Answer

It is easily done with   -webkit-user-select  none  -moz-user-select  none  -ms-user-select  none  -o-user-select  none  user-select  none      Alternatively   Let s say you have a  lt h1 id  example  gt Hello  World  lt  h1 gt   You will have to remove the innerHTML of that h1  in this case Hello  World  Then you will have to go to CSS and do this    example  before    You can of course use     after   as well        content   Hello  World       Both single-quotes and double-quotes can be used here       display  block     To make sure it works fine in every browser      Now it simply thinks it is a block-element  and not text

User · Answer

For those who have trouble achieving the same in the Android browser with the touch event  use   html  body       -webkit-touch-callout  none      -webkit-user-select  none      -webkit-tap-highlight-color  rgba 0  0  0  0       -webkit-tap-highlight-color  transparent

User · Answer

If you want to disable selection and highlighting for the whole page you can easily do this with CSS           -webkit-touch-callout  none     iOS Safari          -webkit-user-select  none     Safari           -khtml-user-select  none     Konqueror HTML             -moz-user-select  none     Firefox              -ms-user-select  none     Internet Explorer Edge                  user-select  none     Non-prefixed version  currently                                     supported by Chrome and Opera

User · Answer

Check my solution without JavaScript   jsFiddle   x000D   x000D  li hover   x000D      background-color  silver  x000D    x000D   id1 before   x000D      content   File   x000D    x000D   id2 before   x000D      content   Edit   x000D    x000D   id3 before   x000D      content   View   x000D    x000D   lt ul gt  x000D       lt li gt  lt a id  id1  href  www w1 com  gt  lt  a gt  x000D       lt li gt  lt a id  id2  href  www w2 com  gt  lt  a gt  x000D       lt li gt  lt a id  id3  href  www w3 com  gt  lt  a gt  x000D   lt  ul gt  x000D   x000D   x000D    Popup menu with my technique applied  http   jsfiddle net y4Lac 2

User · Answer

A JavaScript solution for Internet nbsp Explorer is   onselectstart  return false

User · Answer

With SASS  SCSS syntax   You can do this with a mixin      Disable selection  mixin disable-selection       -webkit-touch-callout  none     iOS Safari        -webkit-user-select  none       Safari        -khtml-user-select  none        Konqueror HTML        -moz-user-select  none          Firefox        -ms-user-select  none           Internet Explorer Edge        user-select  none               Non-prefixed version  currently supported by Chrome and Opera          No selectable element  no-selectable        include disable-selection      In an HTML tag    lt div class  no-selectable  gt TRY TO HIGHLIGHT lt  div gt      Try it in this CodePen   If you are using an autoprefixer you can remove other prefixes   Browser compatibility here

User · Answer

Workaround for WebKit      Disable tap highlighting    -webkit-tap-highlight-color  rgba 0  0  0  0     I found it in a CardFlip example

User · Answer

A JavaScript-based solution for Internet Explorer is  onselectstart  quot return false  quot

User · Answer

x000D   x000D   hidden after   x000D      content  attr data-txt   x000D    x000D   lt p class  hidden  data-txt  Some text you don t want to be selected  gt  lt  p gt  x000D   x000D   x000D    It s not the best way  though

User · Answer

If you want to disable text selection on everything except on  lt p gt  elements  you can do this in CSS  watch out for the -moz-none which allows override in sub-elements  which is allowed in other browsers with none            -webkit-user-select  none      -khtml-user-select  none      -moz-user-select  -moz-none      -o-user-select  none      user-select  none     p       -webkit-user-select  text      -khtml-user-select  text      -moz-user-select  text      -o-user-select  text      user-select  text

User · Answer

Use   -webkit-user-select  none  -moz-user-select  none  -ms-user-select  none  user-select  none

User · Answer

selection  background  transparent  color  transparent      -moz-selection  background  transparent  color  transparent

User · Answer

In the solutions in previous answers selection is stopped  but the user still thinks you can select text because the cursor still changes  To keep it static  you ll have to set your CSS cursor    x000D   x000D   noselect   x000D      cursor  default  x000D      -webkit-touch-callout  none  x000D      -webkit-user-select  none  x000D      -khtml-user-select  none  x000D      -moz-user-select  none  x000D      -ms-user-select  none  x000D      user-select  none  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    This will make your text totally flat  like it would be in a desktop application

User · Answer

If you are using Less and Bootstrap you could write    user-select none

User · Answer

A Quick Hack Update  If you use the value none for all the CSS user-select properties  including browser prefixes of it   there is a problem which can be still occurred by this    div       -webkit-user-select  none     Chrome all   Safari all        -moz-user-select  none        Firefox all                    -ms-user-select  none         Internet Explorer  10           user-select  none            Likely future                  As CSS-Tricks says  the problem is   WebKit still allows the text to be copied  if you select elements around it   You can also use the below one to enforce that an entire element gets selected which means if you click on an element  all the text wrapped in that element will get selected  For this all you have to do is changing the value none to all    force-select       -webkit-user-select  all      Chrome 49             -moz-user-select  all         Firefox 43            -ms-user-select  all          No support yet        user-select  all              Likely future

User · Answer

This may work        selection           color  none          background  none               For Mozilla Firefox          -moz-selection           color  none          background  none

User · Answer

The right solution for CSS  There s a bug without getting a resolver yet  so we can make use of it    -moz-selection        selection      And voil    there isn t any highlighting  but because of a bug  or a feature  Here you have a demo  try to select text

User · Answer

I like the hybrid CSS   jQuery solution   To make all elements inside  lt div class  draggable  gt  lt  div gt  unselectable  use this CSS    draggable       -webkit-user-select  none       -khtml-user-select  none         -moz-user-select  none          -ms-user-select  none           -o-user-select  none              user-select  none      draggable input       -webkit-user-select  text       -khtml-user-select  text         -moz-user-select  text           -o-user-select  text              user-select  text       And then  if you re using jQuery  add this inside a   document  ready   block   if     browser msie  amp  amp    browser version  lt  10       browser opera      draggable   find   not input    attr  unselectable    on      I figure you still want any input elements to be interactable  hence the  not   pseudo-selector  You could use     instead if you don t care   Caveat  Internet nbsp Explorer nbsp 9 may not need this extra jQuery piece  so you may want to add a version check in there

User · Answer

This works in some browsers     selection  background-color  transparent     moz-selection  background-color  transparent     webkit-selection  background-color  transparent     Simply add your desired elements ids in front of the selectors separated by commas without spaces  like so   h1  selection h2  selection h3  selection p  selection  background-color  transparent   h1  moz-selection h2  moz-selection h3  moz-selection p  moz-selection  background-color  transparent   h1  webkit-selection h2  webkit-selection h3  webkit-selection p  webkit-selection  background-color  transparent     The other answers are better  this should probably be seen as a last resort catchall

User · Answer

You can do so in Firefox and Safari  Chrome also      selection   background  transparent      -moz-selection   background  transparent

User · Answer

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

[css] How to disable text selection highlighting

Examples related to css

Examples related to cross-browser

Examples related to highlight

Examples related to textselection