Best IT Recipes

CSS disable text selection

Currently, I put this in a body tag to disable text selection:

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

However, my input and textarea blocks are no longer selectable. How can I make only these input elements and the rest are not selectable?

+74
css css3
May 30 '12 at 4:29 am
source share
9 answers

Do not apply these properties to the entire body. Move them to a class and apply this 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; }
+131
May 30 '12 at 4:52
source share

You can also disable user selection for all items:

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

And how to enable it on the elements you want so that the user can select:

 input, textarea /*.contenteditable?*/ { -webkit-touch-callout:default; -webkit-user-select:text; -moz-user-select:text; -ms-user-select:text; user-select:text; }
+24
Oct 25 '12 at 11:59
source share

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;"/>
+9
Mar 07 '13 at 2:04 on
source share
 ::selection,::moz-selection {color:currentColor;background:transparent}
+2
May 21 '15 at 21:40
source share

Use the wildcard * 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 choice.

Demo

+1
May 30 '12 at 5:56
source share

you can turn off all selections

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

you can now enable input and text area

 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;}
+1
Jan 16 '17 at 10:07 on
source share

instead of body enter a list of required elements

0
May 30 '12 at 4:31 a.m.
source share

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

In addition, you can add this class in specific cases using javascript. Example here. Cannot select content using CSS .

0
May 30 '12 at 5:52
source share

Turn off 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">
0
Apr 21 '14 at 14:17
source share


More articles:


All Articles