CSS disable text selection

Problem

Currently, I have put this in the body tag to disable text selections:

body {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

However, my input and textarea boxes are now unselectable. How can I only make these input elements selectable and the rest unselectable?

Problem courtesy of: Neil

Solution

Don't apply these properties to the whole body. Move them to a class and apply that class to the elements you want to disable select:

.disable-select {
  -webkit-user-select: none;  
  -moz-user-select: none;    
  -ms-user-select: none;      
  user-select: none;
}
Solution courtesy of: Someth Victory

Discussion

Disable selection everywhere

input, textarea ,*[contenteditable=true] {
  -webkit-touch-callout:default;
  -webkit-user-select:text;
  -moz-user-select:text;
  -ms-user-select:text;
  user-select:text;
   }

IE7

 <BODY oncontextmenu="return false" onselectstart="return false" ondragstart="return false">
Discussion courtesy of: cristianojeda

I agree with Someth Victory, you need to add a specific class to some elements you want to be unselectable.

Also, you may add this class in specific cases using javascript. Example here Making content unselectable with help of CSS.

Discussion courtesy of: starikovs

You could also disable user select on all elements:

* {
    -webkit-touch-callout:none;
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none;
}

And than enable it on the elements you do want the user to be able to select:

input, textarea /*.contenteditable?*/ {
    -webkit-touch-callout:default;
    -webkit-user-select:text;
    -moz-user-select:text;
    -ms-user-select:text;
    user-select:text;
}
Discussion courtesy of: Rik

Use a wild card selector * for this purpose.

#div * { /* Narrowing, to specific elements, like  input, textarea is PREFFERED */
 -webkit-user-select: none;  
  -moz-user-select: none;    
  -ms-user-select: none;      
  user-select: none;
}

Now, every element inside a div with id div will have no selection.

Demo

Discussion courtesy of: Starx

you can disable all selection

.disable-all{-webkit-touch-callout: none;  -webkit-user-select: none;-khtml-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;}

now you can enable input and text-area enable

input, textarea{
-webkit-touch-callout:default;
-webkit-user-select:text;
-khtml-user-select: text;
-moz-user-select:text;
-ms-user-select:text;
user-select:text;}
Discussion courtesy of: Shahnawaz

instead of body type a list of elements you want.

Discussion courtesy of: Eric Fortis
::selection,::moz-selection {color:currentColor;background:transparent}
Discussion courtesy of: B T

Just wanted to summarize everything:

.unselectable {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

<div class="unselectable" unselectable="yes" onselectstart="return false;"/>
Discussion courtesy of: Meglio

This recipe can be found in it's original form on Stack Over Flow.