CSS disable text selection

Css Problem Overview

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?

Css Solutions

Solution 1 - Css

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 2 - Css

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;
}

Solution 3 - Css

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;"/>

Solution 4 - Css

::selection,::moz-selection {color:currentColor;background:transparent}

Solution 5 - Css

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;}

Solution 6 - Css

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

Solution 7 - Css

instead of body type a list of elements you want.

Solution 8 - Css

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.

Solution 9 - Css

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">

Content Type	Original Author	Original Content on Stackoverflow
Question	Neil	View Question on Stackoverflow
Solution 1 - Css	Someth Victory	View Answer on Stackoverflow
Solution 2 - Css	Rik	View Answer on Stackoverflow
Solution 3 - Css	Meglio	View Answer on Stackoverflow
Solution 4 - Css	B T	View Answer on Stackoverflow
Solution 5 - Css	Shahnawaz	View Answer on Stackoverflow
Solution 6 - Css	Starx	View Answer on Stackoverflow
Solution 7 - Css	Eric Fortis	View Answer on Stackoverflow
Solution 8 - Css	starikovs	View Answer on Stackoverflow
Solution 9 - Css	cristianojeda	View Answer on Stackoverflow