Css rule to disable text selection highlighting?

No one here and posted an answer with all of the correct css variations, so here it is.

No one here and posted an answer with all of the correct css variations, so here it is: -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -o-user-select: none; user-select: none.

1 I have made a function to autodetect CSS prefix ;) b2bweb. Fr/molokoloco/js-cssprefix – molokoloco Jan 14 at 12:13 1 nice code molokoloco :D , although I personally would stay well away from using it, as sometimes you may need the values different for different browsers, and it relys on JavaScript. Making a class and adding it to your element or applying the css to your type of element in your style-sheet is pretty bullet proof.

– Blowsie Jan 14 at 13:07 'user-select'- Values: none | text | toggle | element | elements | all | inherit - w3. Org/TR/2000/WD-css3-userint-20000216 – Blowsie Mar 21 at 9:44 3 Actually -o-user-select isn't implemented in Opera. It implements IE's unselectable attribute instead.

– Tim Down Jul 3 at 10:52 Great answer! Do you know if there is a way to override this a child of an element with this style? I've tried x:text!

Important; x:auto! Important; and x:normal! Important; to no avail.

– Fantabulum Jul 11 at 18:19.

In most browsers, this can be achieved using CSS: *. Unselectable { -moz-user-select: -moz-none; -khtml-user-select: none; -webkit-user-select: none; user-select: none; } For IE and Opera, you will need to use the unselectable expando property of the element you wish to be unselectable. You can set this using an attribute in HTML: ... Sadly this property isn't inherited, meaning you have to put an attribute in the start tag of every element inside the .

If this is a problem, you could instead use JavaScript to do this recursively for an element's descendants: function makeUnselectable(node) { if (node. NodeType == 1) { node. Unselectable = true; } var child = node.

FirstChild; while (child) { makeUnselectable(child); child = child. NextSibling; } } makeUnselectable(document. GetElementById("foo")).

– Blowsie Jan 14 at 13:15 6 @Blowsie: I don't think so: the CSS 2 spec states that *. Foo and . Foo are precisely equivalent (in the second case, the universal selector (*) is implied), so barring browser quirks, I can't see that including the * will harm performance.

It's a long-standing habit of mine to include the *, which I originally started doing for readability: it explicitly states at a glance that the author intends to match all elements. – Tim Down Jan 14 at 13:24 4 oooh after some further reading, it seems * is only un-effiecient when using it as the key (the righmost selector) ie . Unselectable * .

Further info here code.google. Com/speed/page-speed/docs/… – Blowsie Jan 14 at 13:49 1 The unselectable attribute does not seem to be working in IE 9 – beanland Jan 14 at 21:41 1 @beanland: I've tested the unselectable attribute in IE 9 now and it works fine. – Tim Down Jan 14 at 14:27.

This will disable user selection in Firefox and WebKit -webkit-user-select:none; -moz-user-select:none.

3 @Sam Soffes - that's because WebKit is the rendering engine used by Chrome and Safari. – MДΓΓ БДLL Aug 30 '10 at 16:41 2 I added "cursor:default;" otherwise the cursor changes to the select cursor (at least in FF) – some Oct 6 '10 at 13:52 1 @Matt Ball +1 captain obvious point :) – Sam Soffes Oct 6 '10 at 15:44 2 @Sam Soffes: does that point go to me or to you? :P – MДΓΓ БДLL Oct 6 '10 at 16:09 1 lots of passive aggressive smileys going on around here : ) – Shawn Oct 6 '10 at 22:24.

A Javascript solution for IE is onselectstart="return false.

3 Don’t forget about ondragstart! – Mathias Bynens May 26 '10 at 13:25.

Selection { background: transparent; } ::-moz-selection { background: transparent; }.

1 This combined with the onselectstart = function(){ return false; } for IE gives me exactly what I wanted. Thanks. – Gordon Tucker Jan 6 '10 at 2:03 7 I wouldn't recommend doing this, because it doesn't actually fix the issue; disabling text selection - it merely hides it.

This can lead to bad usability, because if I drag my cursor around the page I could be selecting any arbitrary text without knowing it. This can cause all kinds of weird usability "bugs". – Keithamus Feb 2 at 15:01.

Until CSS 3's user-select property becomes available only Gecko based browsers will support the -moz-user-select property you already found. This off course is not supported in browsers that do not use the Gecko rendering engine. There is no "standards" compliant quick and easy way to do it, using JavaScript is an option.

The real question is, why do you want users to not be able to highlight and presumably copy and paste certain elements? I have not come across a single time that I wanted to not let users high-light a certain portion of my website. Several of my friends, after spending many hours reading and writing code will use the high-light feature as a way to remember where on the page they were, or providing a marker so that their eyes know where to look next.

The only place I could see this being useful is if you have buttons for forms that should not be copy and pasted if a user copy and pasted the website.

3 The buttons thing would be exactly my motivation. – Kriem May 5 '09 at 20:47 This may be necessary for embedded devices. I.e.

A device where a browser is used for rendering the UI. – Tim Kersten Nov 4 '09 at 12:05 Being able to ctrl-a, ctrl-c only the text content portion of a site would be useful imo. – codeinthehole Nov 13 '09 at 16:19 5 Another reason this is needed is Shift-clicking to select multiple rows in a grid or table.

You don't want to to highlight the text, you want it to select the rows. – Gordon Tucker Jan 6 '10 at 16:08 1 There are also legal issues where someone else's content is being legally republished but a clause in the license requires web publishers to prevent text from being easily copied and pasted. This is what led me to find this question.

I don't agree with the requirement but the company I'm contracting for is legally obligated to implement it this way. – Craig M Mar 15 at 20:34.

If you want to disable text selection on everything except on elements you can do this in css (watch out for the -moz-none which allows override in sub-elements, which is allowed in other browsers with none): * { -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: -moz-none; -o-user-select: none; user-select: none; } p { -webkit-user-select: text; -khtml-user-select: text; -moz-user-select: text; -o-user-select: text; user-select: text; }.

Make sure you also make input fields selectable: p, input { -webkit-user-select: text; -khtml-user-select: text; -moz-user-select: text; -o-user-select: text; user-select: text; } – joshuadelange Jul 7 at 22:39 1 Be very wary about turning off browser UI expectations on ALL code except for one item. What about list items text, for example? – Jason T Featheringham Nov 12 at 7:13.

A way to prevent dragging: -webkit-user-drag: none; -moz-user-drag: none; user-drag: none.

Workaround for WebKit. I found it in CardFlip example: /* Disable tap highlighting */ -webkit-tap-highlight-color: rgba(0,0,0,0).

Aside from the Mozilla-only property, no, there is no way to disable text selection with just standard CSS (as of now). If you notice, Stack Overflow doesn't disable text selection for their navigation buttons, and I would recommend against doing so in most cases, since it modifies normal selection behavior and makes it conflict with a user's expectations.

An input or button's text can't be selected. – anon May 5 '09 at 20:40 @anon: Most users will probably not try to select the text of your button, so in practice, it shouldn't really matter much. Besides, in order to do so, they will have to start selecting outside of the button—if they click inside the button itself, the onclick handler will activate instead.

Plus, certain browsers (e.g. Safari) actually let you select the text of normal buttons… – htw May 5 '09 at 20:49.

Here is my solution. Work on all browsers. tehno-team.net/javascript/25.

I like the hybrid CSS + jQuery solution. To make all elements inside unselectable, use this CSS: . Draggable { -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -o-user-select: none; user-select: none; } .

Draggable input { -webkit-user-select: text; -khtml-user-select: text; -moz-user-select: text; -o-user-select: text; user-select: text; } And then, if you're using jQuery, add this inside a $(document).ready() block: if ($.browser. Msie) $('. Draggable').

Find(':not(input)'). Attr('unselectable', 'on'); I figure you still want any input elements to be interactable, hence the :not() pseudo-selector. You could use '*' instead if you don't care.

Caveat: IE9 may not need this extra jQuery piece, so you may want to add a version check in there.

I cant really gove you an answer,but what I can give you is a way to a solution, that is you have to find the anglde that you relate to or peaks your interest. A good paper is one that people get drawn into because it reaches them ln some way.As for me WW11 to me, I think of the holocaust and the effect it had on the survivors, their families and those who stood by and did nothing until it was too late.