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: http://jsfiddle.net/Smy26/ — Sampson, May 30 '12 at 04:33
Looks like webkit allows selection on those elements, but moz doesn't. — Christian, May 30 '12 at 04:40
possible duplicate of [CSS rule to disable text selection highlighting](http://stackoverflow.com/questions/826782/css-rule-to-disable-text-selection-highlighting) — Mottie, May 14 '13 at 18:09

score 221 · Accepted Answer · answered May 30 '12 at 04:52

221

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 '12 at 04:52

Someth Victory

4,492
2
23
27

4

[Not supported](https://developer.mozilla.org/en-US/docs/Web/CSS/user-select#Browser_compatibility) in Chrome, Safari. – knutole May 28 '14 at 19:45
6

@knutole Read the table again. The _value_ of `element` is not supported in Chrome/Safari. – MForMarlon Sep 05 '14 at 23:59

score 42 · Answer 2 · edited Jul 18 '13 at 10:07

42

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 '13 at 10:07

Dan

55,715
40
116
154

answered Oct 25 '12 at 11:59

Rik

3,328
1
20
23

1

For full browser support you should add following attributes to your or
element: unselectable="yes" onselectstart="return false" onmousedown="return false" /*use with care, the last attribute can AFFECT EXISTING FUNCTOIONALITY*/
– Dan Jul 18 '13 at 12:19

score 13 · Answer 3 · answered Mar 07 '13 at 14:04

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 07 '13 at 14:04

Meglio

1,646
2
17
33

1

Old versions of Firefox could require adding one more attribute to HTML: onmousedown="return false" – Dan Jul 18 '13 at 12:14

score 2 · Answer 4 · edited Jun 20 '20 at 09:12

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 '20 at 09:12

Community

1
1

answered May 30 '12 at 05:56

Starx

77,474
47
185
261

B T · Answer 5 · 2016-07-13T22:14:51.590

2

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

edited Jul 13 '16 at 22:14

answered May 21 '15 at 21:40

B T

57,525
34
189
207

As stated here http://www.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} – Vladislav Jul 13 '16 at 06:24
1

@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: https://developer.mozilla.org/en-US/docs/Web/CSS/::selection . Another note, firefox is ready to remove the need for the prefix: https://bugzilla.mozilla.org/show_bug.cgi?id=509958 – B T Jul 13 '16 at 22:19

score 2 · Answer 6 · answered Jan 16 '17 at 10:07

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

score 0 · Answer 7 · answered May 30 '12 at 04:31

0

instead of body type a list of elements you want.

answered May 30 '12 at 04:31

Eric Fortis

16,372
6
41
62

score 0 · Answer 8 · edited Aug 14 '22 at 03:08

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 '22 at 03:08

Florke64

5
5

answered May 30 '12 at 05:52

starikovs

3,240
4
28
33

cristianojeda · Answer 9 · 2014-04-21T18:22:28.057

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 '14 at 18:22

answered Apr 21 '14 at 14:17

cristianojeda

339
2
12

CSS disable text selection

9 Answers9

Demo

Linked