How can I make MANY elements unselectable using jQuery or CSS?

Question

Possible Duplicate:
Is there a way to make a DIV unselectable?

I have seen a number of solutions out there that work for an element. However I have an area with labels and buttons. It's not just one element it's every element within a DIV.

How can I make anything contained within that DIV unselectable? Note that I cannot just put a mask layer over the DIV as the DIV has buttons I need to be able to click.

Did you try using $(this).each(function(){ //disable what you want }); — Issa Qandil, Oct 07 '12 at 14:12
doesn't setting parent unselectable work? All children should be included. Other wise try selector `mydivclass *` — charlietfl, Oct 07 '12 at 14:13
It's not a duplicate as the previous question is for a DIV. My question is for everything inside a DIV. — Samantha J T Star, Oct 07 '12 at 14:15

Chris · Accepted Answer · 2012-10-07T14:22:35.837

5

$(".yourdiv").children().css({userSelect: 'none'});

That's in case you want to disable selection using the CSS user-select property. If not, the above can be easily generalized to other methods.

The above only selects direct children, to select all descendants, use the .find() method:

$(".yourdiv").find("*").css({userSelect: 'none'});

You can also do this using pure CSS:

.yourdiv * { /*this selects all elements that are children of yourdiv*/
    /*user-select: none rules*/
}

Or:

.yourdiv > * { /*this selects all elements that are direct descendants of yourdiv*/
    /*user-select: none rules*/
}

edited Oct 07 '12 at 14:22

answered Oct 07 '12 at 14:15

Chris

26,544
5
58
71

Thanks. How could I extend it to also do the other properties: -webkit-user-select: none; /* Chrome/Safari */ -moz-user-select: none; /* Firefox */ -ms-user-select: none; /* IE10+ */ -o-user-select: none; user-select: none; – Samantha J T Star Oct 07 '12 at 14:17
`$(".yourdiv *")` would cover all descendents not just children – charlietfl Oct 07 '12 at 14:17
@SamanthaJ New versions of jQuery automatically add prefixes if needed. – Chris Oct 07 '12 at 14:18
Do you think this would be an expensive operation if it covers many elements? – Samantha J T Star Oct 07 '12 at 14:19
could add class to parent and do the rest with css – charlietfl Oct 07 '12 at 14:20
@SamanthaJ See edit for a note. – Chris Oct 07 '12 at 14:20
@SamanthaJ See updated answer for a pure CSS solution. – Chris Oct 07 '12 at 14:22
Could I just do this to the body? Note that I never want the user to be able to select anything. – Samantha J T Star Oct 07 '12 at 14:27
@SamanthaJ Sure, just replace `.yourdiv` in the examples above with `body`. – Chris Oct 07 '12 at 14:28
This doesn't work for Opera or IE < 10, which don't support CSS `-x-user-select` properties. – Tim Down Oct 07 '12 at 15:48
@TimDown Well, I believe the main reason the OP is asking the question is how to apply the rule on all child elements, not how to actually make an element unselectable. I might be wrong, though. – Chris Oct 07 '12 at 16:13

score 1 · Answer 2 · edited May 23 '17 at 11:51

1

CSS:

div.unselectable {
    -moz-user-select: -moz-none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -o-user-select: none;
    user-select: none;
}

HTML:

<div id="foo" class="unselectable">...</div>

Reference:

edited May 23 '17 at 11:51

Community

1
1

answered Oct 07 '12 at 14:20

Koerr

15,215
28
78
108

score 1 · Answer 3 · edited May 23 '17 at 11:59

1

The proprietary user-select CSS variations are inherited in all browsers that support them. See this example:

http://jsfiddle.net/yD7bM/

Your problem is the browsers that do not support these CSS properties, namely Opera and IE <= 9. Happily both of these implement an alternative: the unselectable attribute. However, it is this attribute that is not inherited.

The best solution is to put an unselectable="on" attribute on every element that you require to be unselectable in the HTML (i.e. do it server-side). However, if this is not an option, you can do it using JavaScript using a recursive function.

If you're using jQuery you could do something like this to add the unselectable attribute to each element with class "unselectable" and all of its descendants:

 $(".unselectable").find("*").andSelf().attr("unselectable", "on");

Demo: http://jsbin.com/ulazic/2

edited May 23 '17 at 11:59

Community

1
1

answered Oct 07 '12 at 15:46

Tim Down

318,141
75
454
536

Can you, please, point to any documentation on `unselectable` attribute? – Pavlo Oct 07 '12 at 15:58
Uhh, what about browser support? – Pavlo Oct 07 '12 at 16:04
1

@Pavlo: IE 5.5+, Opera 8 or 9+ (can't find official docs for Opera). – Tim Down Oct 07 '12 at 16:08
@Pavlo: Some searching reveals Opera has had it since 2006 or earlier, suggesting support was added in Opera 9. – Tim Down Oct 07 '12 at 16:19
IE 10 doesn't support those CSS properties either. – VoidKing May 07 '13 at 14:02
@VoidKing: IE 10 supports `-ms-user-select`: http://ie.microsoft.com/testdrive/HTML5/msUserSelect/ – Tim Down May 07 '13 at 14:11
@TimDown Guess I messed something up, when last I tried. I stand corrected. – VoidKing May 07 '13 at 14:48
@TimDown Actually, I have IE 10 and the text is very much still selectable after applying `-ms-user-select` to the same element that when I assign the attribute `unselectable` the text therein can't be selected. I have never, in any version of IE 10, 9, 8 or below, gotten this so-called CSS rule to apply to IE, no matter the circumstance, no matter how clear the cache is, etc. What am I doing wrong? – VoidKing May 07 '13 at 19:19
@VoidKing: Not sure what you're doing wrong. The following works for me in IE 10, provided it's not in any compatibility mode: http://jsfiddle.net/hBDZe/1/ – Tim Down May 07 '13 at 23:25
@TimDown Wierd, your jsfiddle works for me, but if I implement the same exact rule `-ms-user-select: none;` it doesn't work for me. I always use them to make ` – VoidKing May 08 '13 at 13:14

How can I make MANY elements unselectable using jQuery or CSS?

3 Answers3