CSS rule to disable text selection highlighting
18
For anchors that act like buttons (for example, Questions, Tags, Users, etc. at the top of the Stack Overflow page) or tabs, is there a CSS standard way to disable the highlighting effect if the user accidentally selects the text?

I realize this could be done with JavaScript, and a little googling yielded the Mozilla-only -moz-user-select option.

Is there a standard-compliant way to accomplish this with CSS, and if not, what is the "best practice" approach?
improve this question | comment
Maya Gaylord Created at: 2013-11-13 17:07:13 UTC By Maya Gaylord
can elements within the element witch has highlighting disabled, have highlighting enabled with in css in the style or class attribute? or in other words, are there other values for -webkit-user-select ect. other than just none? - Dr. Efrain Lowe
'user-select'- Values: none | text | toggle | element | elements | all | inherit - w3.org/TR/2000/WD-css3-userint-20000216 - Otis Aufderhar
uihacker.blogspot.com/2011/12/… - Bryana Wolff
Related: stackoverflow.com/questions/16600479/… = how to allow only some of the child elements to be selected - Krystina Shields
19 Answers
0
This will be useful if color selection is also not needed.

::-moz-selection { background:none; color:none; }
::selection { background:none; color:none; }


..all other browser fixes. will work in ie9 +
0
If you are using LESS and bootstrap you could write

.user-select(none);

0
In most browsers, this can be achieved using proprietary variations on the proposed-but-now-defunct CSS3 user-select property:

*.unselectable {
   -moz-user-select: 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"));


This still doesn't cover all possibilities. While it is impossible to initiate selections in unselectable elements, in some browsers (IE and Firefox, for example) it's still impossible to prevent selections that start before and end after the unselectable element without making the whole document unselectable.
0
This will disable user selection in Firefox and WebKit:

-webkit-user-select:none;
-moz-user-select:none;

0
A JavaScript solution for IE is

onselectstart="return false;"

0
If you want to disable text selection on everything except on <p> 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;
}

0
You can do so in Firefox and Safari (Chrome also?)

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

0
Until CSS 3's user-select property becomes available only Gecko based browsers will support the -moz-user-select property you already found.

This of 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 highlight a certain portion of my website. Several of my friends, after spending many hours reading and writing code will use the highlight 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.
0
I like the hybrid CSS + jQuery solution.

To make all elements inside <div class="draggable"></div> unselectable, use this CSS:

.draggable {
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    -ms-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 && $.browser.version < 10) || $.browser.opera) $('.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.
0
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;


More information can be found here.
0
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-o-user-select: none;
user-select: none;

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


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


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"));


-webkit-user-select:none;
-moz-user-select:none;


onselectstart="return false;"


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

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


<div class="draggable"></div>


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


if ($.browser.msie) $('.draggable').find(':not(input)').attr('unselectable', 'on');

0
A way to prevent dragging:

-webkit-user-drag: none;
-moz-user-drag: none;
user-drag: none;

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.
0
This is not CSS, but it is worth a mention:

jQuery UI Disable Selection:

$("your.selector").disableSelection();

0
Add this to the first div in which you want to disable the selection for text:

onmousedown='return false;' 
onselectstart='return false;'

0
Try it, This may work

.unselectable {
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}

0
.hidden:after {
  content: attr(data-txt);
}


And in HTML:

<p class="hidden" data-txt="Some text you don't want to be selected"></p>


It's not the best way, though. 
0
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-o-user-select: none;
-ms-user-select: none;
user-select: none;

0
Workaround for WebKit:

/* Disable tap highlighting */
-webkit-tap-highlight-color: rgba(0,0,0,0);


I found it in a CardFlip example.
Your Answer