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?
This question is related to
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;"/>
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.
instead of body type a list of elements you want.
::selection,::moz-selection {color:currentColor;background:transparent}
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;}
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;
}
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">
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.
Source: Stackoverflow.com