CSS disable text selection

Question

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?

I'm able to select input and textarea elements: jsfiddle.net/Smy26 — Sampson
– Sampson, Commented May 30, 2012 at 4:33
Looks like webkit allows selection on those elements, but moz doesn't. — Christian
– Christian, Commented May 30, 2012 at 4:40
possible duplicate of CSS rule to disable text selection highlighting — Mottie
– Mottie, Commented May 14, 2013 at 18:09
I know that this is an old question, but it would be nice to share in the question, why there was the need to deny text selection in the whole body as default. That could be useful to share, since most answers are just guessing your intentions. Thanks for sharing — V. Bozz
– V. Bozz, Commented Sep 14, 2023 at 19:37

Someth Victory · Accepted Answer · 2012-05-30 04:52:32Z

225

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

answered May 30, 2012 at 4:52

Someth Victory

4,5592 gold badges26 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Dan · Accepted Answer · 2013-07-18 10:07:59Z

43

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

edited Jul 18, 2013 at 10:07

Dan

58.2k44 gold badges125 silver badges162 bronze badges

answered Oct 25, 2012 at 11:59

Rik

3,6061 gold badge27 silver badges27 bronze badges

1 Comment

Dan Over a year ago

For full browser support you should add following attributes to your <body> or <div> element: unselectable="yes" onselectstart="return false" onmousedown="return false" /*use with care, the last attribute can AFFECT EXISTING FUNCTOIONALITY*/

Meglio · Accepted Answer · 2013-03-07 14:04:23Z

13

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

answered Mar 7, 2013 at 14:04

Meglio

1,7852 gold badges20 silver badges41 bronze badges

1 Comment

Dan Over a year ago

Old versions of Firefox could require adding one more attribute to HTML: onmousedown="return false"

Community · Accepted Answer · 2020-06-20 09:12:55Z

2

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

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered May 30, 2012 at 5:56

Starx

79.3k50 gold badges187 silver badges266 bronze badges

Comments

B T · Accepted Answer · 2016-07-13 22:14:51Z

2

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

edited Jul 13, 2016 at 22:14

answered May 21, 2015 at 21:40

B T

61.6k36 gold badges200 silver badges212 bronze badges

2 Comments

Vladislav Over a year ago

As stated here w3schools.com/cssref/sel_selection.asp. This is not part of any CSS specification so far, and Firefox requires -moz-. So the correct should be: ::-moz-selection {color:currentColor;background:transparent} ::selection {color:currentColor;background:transparent}

B T Over a year ago

@Vladislav Good point about the moz prefix. Honestly tho, don't trust w3schools. Its such a terrible source. MDN gives the actual browser compatibility versions and notes that ::selection was removed from the CSS draft, BUT was added back: developer.mozilla.org/en-US/docs/Web/CSS/::selection . Another note, firefox is ready to remove the need for the prefix: bugzilla.mozilla.org/show_bug.cgi?id=509958

Shahnawaz · Accepted Answer · 2017-01-16 10:07:44Z

2

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

answered Jan 16, 2017 at 10:07

Shahnawaz

1051 silver badge12 bronze badges

Comments

cristianojeda · Accepted Answer · 2014-04-21 18:22:28Z

0

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

edited Apr 21, 2014 at 18:22

answered Apr 21, 2014 at 14:17

cristianojeda

3392 silver badges12 bronze badges

Comments

Florke64 · Accepted Answer · 2022-08-14 03:08:33Z

0

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.

edited Aug 14, 2022 at 3:08

Florke64

55 bronze badges

answered May 30, 2012 at 5:52

starikovs

3,4084 gold badges33 silver badges36 bronze badges

Collectives™ on Stack Overflow

CSS disable text selection

8 Answers 8

Comments

1 Comment

1 Comment

Demo

Comments

2 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

8 Answers 8

Comments

1 Comment

1 Comment

Comments

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related