<p>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.</p>

<p>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.</p>

[{'answer_id': 69474, 'author': 'Dave Rutledge', 'author_id': 2486915, 'author_profile': 'https://Stackoverflow.com/users/2486915', 'pm_score': 3, 'selected': False, 'text': '<p>Absolutely position divs over the text area with a z-index higher and give these divs a transparent <a href="http://en.wikipedia.org/wiki/Graphics_Interchange_Format" rel="nofollow noreferrer">GIF</a> background graphic.</p>\n\n<p>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 <code>display:box</code>, width and height set as well as the transparent background image.</p>\n'}, {'answer_id': 69476, 'author': 'Kinjal Dixit', 'author_id': 6629, 'author_profile': 'https://Stackoverflow.com/users/6629', 'pm_score': 1, 'selected': False, 'text': '<p>Images can be selected too.</p>\n\n<p>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.</p>\n'}, {'answer_id': 69486, 'author': 'Jorge Alves', 'author_id': 6195, 'author_profile': 'https://Stackoverflow.com/users/6195', 'pm_score': 4, 'selected': False, 'text': '<p>For Firefox you can apply the CSS declaration "-moz-user-select" to "none".\nCheck out their documentation, <em><a href="http://developer.mozilla.org/En/CSS/-moz-user-select" rel="nofollow noreferrer">user-select</a></em>.</p>\n\n<p>It\'s a "preview" of the future "user-select" as they say, so maybe <a href="http://en.wikipedia.org/wiki/Opera_%28web_browser%29" rel="nofollow noreferrer">Opera</a> or <a href="http://en.wikipedia.org/wiki/WebKit" rel="nofollow noreferrer">WebKit</a>-based browsers will support that. I also recall finding something for Internet&nbsp;Explorer, but I don\'t remember what :).</p>\n\n<p>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.</p>\n'}, {'answer_id': 69494, 'author': 'dimarzionist', 'author_id': 10778, 'author_profile': 'https://Stackoverflow.com/users/10778', 'pm_score': 5, 'selected': False, 'text': '<pre><code>&lt;script type="text/javascript"&gt;\n\n/***********************************************\n* Disable Text Selection script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)\n* This notice MUST stay intact for legal use\n* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code\n\n***********************************************/\n\n\nfunction disableSelection(target){\n\n    if (typeof target.onselectstart!="undefined") //IE route\n        target.onselectstart=function(){return false}\n\n    else if (typeof target.style.MozUserSelect!="undefined") //Firefox route\n        target.style.MozUserSelect="none"\n\n    else //All other route (ie: Opera)\n        target.onmousedown=function(){return false}\n\n    target.style.cursor = "default"\n}\n\n\n\n//Sample usages\n//disableSelection(document.body) //Disable text selection on entire body\n//disableSelection(document.getElementById("mydiv")) //Disable text selection on element with id="mydiv"\n\n\n&lt;/script&gt;\n</code></pre>\n\n<p><strong>EDIT</strong></p>\n\n<p>Code apparently comes from <a href="http://www.dynamicdrive.com" rel="noreferrer">http://www.dynamicdrive.com</a></p>\n'}, {'answer_id': 69500, 'author': 'Stephen M. Redd', 'author_id': 10115, 'author_profile': 'https://Stackoverflow.com/users/10115', 'pm_score': 4, 'selected': False, 'text': '<p>Try this:</p>\n\n<pre><code>&lt;div onselectstart="return false"&gt;some stuff&lt;/div&gt;\n</code></pre>\n\n<p>Simple, but effective... works in current versions of all major browsers.</p>\n'}, {'answer_id': 69671, 'author': 'Wedge', 'author_id': 332, 'author_profile': 'https://Stackoverflow.com/users/332', 'pm_score': 1, 'selected': False, 'text': '<p>If it looks bad you can use CSS to change the appearance of selected sections.</p>\n'}, {'answer_id': 72244, 'author': 'pdc', 'author_id': 8925, 'author_profile': 'https://Stackoverflow.com/users/8925', 'pm_score': 2, 'selected': False, 'text': '<p>For an example of why it might be desirable to suppress selection, see <a href="http://simile.mit.edu/timeline/" rel="nofollow noreferrer">SIMILE TImeline</a>, 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.</p>\n'}, {'answer_id': 541719, 'author': 'jlleblanc', 'author_id': 586, 'author_profile': 'https://Stackoverflow.com/users/586', 'pm_score': 3, 'selected': False, 'text': '<p>I\'m finding some level of success with the CSS described here <a href="http://www.quirksmode.org/css/selection.html" rel="nofollow noreferrer">http://www.quirksmode.org/css/selection.html</a>:</p>\n\n<pre class="lang-css prettyprint-override"><code>::selection {\n    background-color: transparent;\n}\n</code></pre>\n\n<p>It took care of most of the issues I was having with some ThemeRoller <code>ul</code> 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.</p>\n'}, {'answer_id': 668706, 'author': 'Alan Hensel', 'author_id': 14532, 'author_profile': 'https://Stackoverflow.com/users/14532', 'pm_score': 2, 'selected': False, 'text': '<p>For Safari, <code>-khtml-user-select: none</code>, just like Mozilla\'s <code>-moz-user-select</code> (or, in JavaScript, <code>target.style.KhtmlUserSelect="none";</code>).</p>\n'}, {'answer_id': 3320442, 'author': 'hbtdev', 'author_id': 400478, 'author_profile': 'https://Stackoverflow.com/users/400478', 'pm_score': 0, 'selected': False, 'text': '<p>The following works in Firefox interestingly enough if I remove the write line it doesn\'t work.\nAnyone have any insight why the write line is needed.</p>\n\n<pre><code>&lt;script type="text/javascript"&gt;\ndocument.write(".");\ndocument.body.style.MozUserSelect=\'none\';\n&lt;/script&gt;\n</code></pre>\n'}, {'answer_id': 3320495, 'author': 'Taylor D. Edmiston', 'author_id': 149428, 'author_profile': 'https://Stackoverflow.com/users/149428', 'pm_score': 1, 'selected': False, 'text': '<p>Any JavaScript or CSS method is easily circumvented with Firebug (like Flickr\'s case).</p>\n\n<p>You can use the <a href="http://www.quirksmode.org/css/selection.html" rel="nofollow noreferrer"><code>::selection</code> pseudo-element</a> in CSS to alter the highlight color.</p>\n\n<p>If the tabs are links and the <a href="https://stackoverflow.com/questions/71074/how-to-remove-firefoxs-dotted-outline-on-buttons-as-well-as-links">dotted rectangle in active state</a> is of concern, you can remove that too (consider usability of course).</p>\n'}, {'answer_id': 4448972, 'author': 'Tim Down', 'author_id': 96100, 'author_profile': 'https://Stackoverflow.com/users/96100', 'pm_score': 9, 'selected': True, 'text': '<p>In most browsers, this can be achieved using CSS:</p>\n\n<pre class="lang-css prettyprint-override"><code>*.unselectable {\n   -moz-user-select: -moz-none;\n   -khtml-user-select: none;\n   -webkit-user-select: none;\n\n   /*\n     Introduced in IE 10.\n     See http://ie.microsoft.com/testdrive/HTML5/msUserSelect/\n   */\n   -ms-user-select: none;\n   user-select: none;\n}\n</code></pre>\n\n<p>For IE &lt; 10 and Opera, you will need to use the <code>unselectable</code> attribute of the element you wish to be unselectable. You can set this using an attribute in HTML:</p>\n\n<pre><code>&lt;div id="foo" unselectable="on" class="unselectable"&gt;...&lt;/div&gt;\n</code></pre>\n\n<p>Sadly this property isn\'t inherited, meaning you have to put an attribute in the start tag of every element inside the <code>&lt;div&gt;</code>. If this is a problem, you could instead use JavaScript to do this recursively for an element\'s descendants:</p>\n\n<pre><code>function makeUnselectable(node) {\n    if (node.nodeType == 1) {\n        node.setAttribute("unselectable", "on");\n    }\n    var child = node.firstChild;\n    while (child) {\n        makeUnselectable(child);\n        child = child.nextSibling;\n    }\n}\n\nmakeUnselectable(document.getElementById("foo"));\n</code></pre>\n'}, {'answer_id': 6382503, 'author': 'Blowsie', 'author_id': 370286, 'author_profile': 'https://Stackoverflow.com/users/370286', 'pm_score': 5, 'selected': False, 'text': '<p>All of the correct CSS variations are:</p>\n\n<pre class="lang-css prettyprint-override"><code>-webkit-touch-callout: none;\n-webkit-user-select: none;\n-khtml-user-select: none;\n-moz-user-select: none;\n-ms-user-select: none;\nuser-select: none;\n</code></pre>\n'}, {'answer_id': 6805102, 'author': 'Big Bill', 'author_id': 859966, 'author_profile': 'https://Stackoverflow.com/users/859966', 'pm_score': 2, 'selected': False, 'text': '<blockquote>\n  <p>"If your content is really interesting, then there is little you can\n  ultimately do to protect it"</p>\n</blockquote>\n\n<p>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.</p>\n'}, {'answer_id': 8219833, 'author': 'kbcom', 'author_id': 1058758, 'author_profile': 'https://Stackoverflow.com/users/1058758', 'pm_score': 1, 'selected': False, 'text': '<p>There are many occasions when turning off selectability enhances the user experience.</p>\n\n<p>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).</p>\n'}, {'answer_id': 12577113, 'author': 'rgb', 'author_id': 738957, 'author_profile': 'https://Stackoverflow.com/users/738957', 'pm_score': 2, 'selected': False, 'text': '<p>Here\'s a <a href="http://en.wikipedia.org/wiki/Sass_%28stylesheet_language%29" rel="nofollow">Sass</a> mixin (scss) for those interested. <a href="http://en.wikipedia.org/wiki/Compass_Project" rel="nofollow">Compass</a>/CSS&nbsp;3 doesn\'t seem to have a user-select mixin.</p>\n\n<pre><code>// @usage use within a rule\n// ex. img {@include user-select(none);}\n// @param assumed valid user-select value\n@mixin user-select($value)\n{\n    &amp; {\n        -webkit-touch-callout: $value;\n        -webkit-user-select: $value;\n        -khtml-user-select: $value;\n        -moz-user-select: $value;\n        -ms-user-select: $value;\n        user-select: $value;\n    }\n}\n</code></pre>\n\n<p>Though Compass would do it in a more robust way, i.e. only add support for vendors you\'ve chosen.</p>\n'}]
['https://Stackoverflow.com/questions/69430', 'https://Stackoverflow.com', 'https://Stackoverflow.com/users/3561/']