Is there a way to make text unselectable on an HTML page? [duplicate]

Question

I'm building an HTML UI with some text elements, such as tab names, which look bad when selected. Unfortunately, it's very easy for a user to double-click a tab name, which selects it by default in many browsers.

I might be able to solve this with a JavaScript trick (I'd like to see those answers, too) -- but I'm really hoping there's something in CSS/HTML directly that works across all browsers.

Freighter

While many of the examples listed here work, keep in mind nothing prevents someone from just looking at the source code and copying the text. – Coe

Depending on your needs https://mcmap.net/q/160494/-javascript-disable-text-selection-via-doubleclick/298479 might also be a valid solution for you. – Soniasonic

Answer 1

In most browsers, this can be achieved using CSS:

*.unselectable {
   -moz-user-select: -moz-none;
   -khtml-user-select: none;
   -webkit-user-select: none;

   /*
     Introduced in IE 10.
     See http://ie.microsoft.com/testdrive/HTML5/msUserSelect/
   */
   -ms-user-select: none;
   user-select: none;
}

For IE < 10 and Opera, you will need to use the unselectable attribute of the element you wish to be unselectable. You can set this using an attribute in HTML:

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

Sadly this property isn't inherited, meaning you have to put an attribute in the start tag of every element inside the <div>. 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.setAttribute("unselectable", "on");
    }
    var child = node.firstChild;
    while (child) {
        makeUnselectable(child);
        child = child.nextSibling;
    }
}

makeUnselectable(document.getElementById("foo"));

Bilge

you can use this selector [unselectable=on]{...} then you avoid putting extra class – Stich

According to dev.l-c-n.com/CSS3-selectors/browser-support.php , this selector should be supported in IE8 and above, and possibly IE7. – Carlyn

@JoeCoder: Yes, I believe attribute selectors do work in IE 7, although not IE 6. – Bilge

Just curious, is there an advantage to using *.unselectable over .unselectable in the stylesheet? – Plata

@BrianMortenson: None at all: they are equivalent. I have a very old habit of including the * in that kind of selector to remind myself explicitly that I'm matching all tag names. However, I no longer find it helpful and it's now just pure habit, so I've pretty much stopped doing it now. – Bilge

funny that @TimDown harvested another 113 rep by copying his answer from this question's duplicate. oh wait! <click> 114 ;) – Urbani

@ericsoco: Yeah. It's an interesting issue: if others have posted answers that people are upvoting and I think I have a better answer, should I post it? The system still allows people to find, view and vote on answers to closed questions, after all. I can't deny that desire for rep has occasionally motivated me to add an answer to a duplicate question on a pet subject rather than vote to close it. – Bilge

of course you should and of course you should post your answers everywhere they can be found. the point of answering, ultimately, is not about rep -- it's about providing answers in places they can be found. i'm all for it. </OT> – Urbani

@Stich I would favor classes over xpath selectors like [unselectable=on] in CSS. In jquery they're good if you narrow down to an immediate container first but in CSS, selectors are parsed right to left so it's still a blanket check of every element and every element's unselectable attribute using the performance-meh xpath engine. Likewise, I believe, with the querySelector API which I'm guessing typically hooks into the CSS/xpath selector engines directly. This may change over time as browsers find perf tweaks but I would definitely keep this in mind when supporting IE<=8, maybe <=9. – Gallego

Probably you are right, but I think early optimizations are evil. Also you won't need the JS if you use [unselectable=on] * {...} – Stich

@venimus: You can't avoid the JS if you want IE <= 9 support and don't want to put unselectable="on" on every element. All you can avoid with your selector is adding class="unselectable". – Bilge

Answer 2

<script type="text/javascript">

/***********************************************
* Disable Text Selection script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code

***********************************************/


function disableSelection(target){

    if (typeof target.onselectstart!="undefined") //IE route
        target.onselectstart=function(){return false}

    else if (typeof target.style.MozUserSelect!="undefined") //Firefox route
        target.style.MozUserSelect="none"

    else //All other route (ie: Opera)
        target.onmousedown=function(){return false}

    target.style.cursor = "default"
}



//Sample usages
//disableSelection(document.body) //Disable text selection on entire body
//disableSelection(document.getElementById("mydiv")) //Disable text selection on element with id="mydiv"


</script>

EDIT

Code apparently comes from http://www.dynamicdrive.com

Limoli

Is there any update for the Opera or making elements unselectable still not supported? – Darden

Why are you changing the cusor style to 'default' in the last case? Otherwise +1 – Stockpile

Infact, you are changing it in all cases (indent is misleading) – Stockpile

Answer 3

All of the correct CSS variations are:

-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;

Synchronic

According to this Answer, the order of those two webkit settings may be critical, where the -webkit-user-select: should come before the -webkit-touch-callout:. I have not verified this. – Huge

Answer 4

Try this:

<div onselectstart="return false">some stuff</div>

Simple, but effective... works in current versions of all major browsers.

Countercurrent

This doesn't work for me in firefox. – Freighter

This is IE only attribute. which makes it redundant. – Zigzagger

Worked perfectly for our app (we only target IE users). – Execrable

This was the only way I could get the effect needed for text selection happening in IE11 when doing a shift-click select in an ag-Grid. – Atrip

Answer 5

For Firefox you can apply the CSS declaration "-moz-user-select" to "none". Check out their documentation, user-select.

It's a "preview" of the future "user-select" as they say, so maybe Opera or WebKit-based browsers will support that. I also recall finding something for Internet Explorer, but I don't remember what :).

Anyway, unless it's a specific situation where text-selecting makes some dynamic functionality fail, you shouldn't really override what users are expecting from a webpage, and that is being able to select any text they want.

Backhand

Likewise in Safari/Chrome/etc. -khtml-user-select:none; – Tocopherol

Is this likely to appear in the CSS standards though? – Jackqueline

Answer 6

I'm finding some level of success with the CSS described here http://www.quirksmode.org/css/selection.html:

::selection {
    background-color: transparent;
}

It took care of most of the issues I was having with some ThemeRoller ul elements in an AIR application (WebKit engine). Still getting a small (approx. 15 x 15) patch of nothingness that gets selected, but half the page was being selected before.

Boardman

Answer 7

Absolutely position divs over the text area with a z-index higher and give these divs a transparent GIF background graphic.

Note after a bit more thought - You'd need to have these 'covers' be linked so clicking on them would take you to where the tab was supposed to, which means you could/should do this with the anchor element set to display:box, width and height set as well as the transparent background image.

Selhorst

This is what flickr does – Jackqueline

This kind of hack is terrible. I'd avoid it personally. – Stcyr

The tiny little problem with this method are the links, as you mentioned, and any other interactions you'd want to have with the main window... – Posting

Answer 8

For an example of why it might be desirable to suppress selection, see SIMILE TImeline, which uses drag-and-drop to explore the timeline, during which accidental vertical mouse movement causes the labels to be highlighted unexpectedly, which looks weird.

Photophore

Answer 9

For Safari, -khtml-user-select: none, just like Mozilla's -moz-user-select (or, in JavaScript, target.style.KhtmlUserSelect="none";).

Acth

Answer 10

"If your content is really interesting, then there is little you can ultimately do to protect it"

That's true, but most copying, in my experience, has nothing to do with "ultimately" or geeks or determined plagiarists or anything like that. It's usually casual copying by clueless people, and even a simple, easily defeated protection (easily defeated by folks like us, that is) works quite well to stop them. They don't know anything about "view source" or caches or anything else... heck, they don't even know what a web browser is or that they're using one.

Taction

Answer 11

Here's a Sass mixin (scss) for those interested. Compass/CSS 3 doesn't seem to have a user-select mixin.

// @usage use within a rule
// ex. img {@include user-select(none);}
// @param assumed valid user-select value
@mixin user-select($value)
{
    & {
        -webkit-touch-callout: $value;
        -webkit-user-select: $value;
        -khtml-user-select: $value;
        -moz-user-select: $value;
        -ms-user-select: $value;
        user-select: $value;
    }
}

Though Compass would do it in a more robust way, i.e. only add support for vendors you've chosen.

Kaisership

Answer 12

Images can be selected too.

There are limits to using JavaScript to deselect text, as it might happen even in places where you want to select. To ensure a rich and successful career, steer clear of all requirements that need ability to influence or manage the browser beyond the ordinary... unless, of course, they are paying you extremely well.

Aether

Answer 13

If it looks bad you can use CSS to change the appearance of selected sections.

Rhizogenic

Answer 14

Any JavaScript or CSS method is easily circumvented with Firebug (like Flickr's case).

You can use the ::selection pseudo-element in CSS to alter the highlight color.

If the tabs are links and the dotted rectangle in active state is of concern, you can remove that too (consider usability of course).

Literature

Answer 15

There are many occasions when turning off selectability enhances the user experience.

For instance allowing the user to copy a block of text on the page without copying the text of any interface elements associated with it (that would become interspersed within the text being copied).

Thimbleful

Answer 16

The following works in Firefox interestingly enough if I remove the write line it doesn't work. Anyone have any insight why the write line is needed.

<script type="text/javascript">
document.write(".");
document.body.style.MozUserSelect='none';
</script>

Fincher

I guess body might not be accessible in DOM before it has content, thus you can't set it's style before you write something in the document. – Donelu