For anchors that act like buttons (for example Questions, Tags, Users, etc. which are located on 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 that 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?
::selection { background: transparent; } ::-moz-selection { background: transparent; }
postcss
and autoprefixer
and set browser version, then postcss
make everything cool.
UPDATE January, 2017:
According to Can I use, the user-select
is currently supported in all browsers except Internet Explorer 9 and its earlier versions (but sadly still needs a vendor prefix).
These are all of the available correct CSS variations:
.noselect { -webkit-touch-callout: none; /* iOS Safari */ -webkit-user-select: none; /* Safari */ -khtml-user-select: none; /* Konqueror HTML */ -moz-user-select: none; /* Old versions of Firefox */ -ms-user-select: none; /* Internet Explorer/Edge */ user-select: none; /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */ }
Selectable text.
Unselectable text.
Note that user-select
is in standardization process (currently in a W3C working draft). It is not guaranteed to work everywhere and there might be differences in implementation among browsers. Also, browsers can drop support for it in the future.
More information can be found in Mozilla Developer Network documentation.
The values of this attribute are none
, text
, toggle
, element
, elements
, all
and inherit
.
In most browsers, this can be achieved using proprietary variations on the CSS user-select
property, originally proposed and then abandoned in CSS 3 and now proposed in CSS UI Level 4:
*.unselectable {
-moz-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
/*
Introduced in Internet Explorer 10.
See http://ie.microsoft.com/testdrive/HTML5/msUserSelect/
*/
-ms-user-select: none;
user-select: none;
}
For Internet Explorer < 10 and Opera < 15, 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"));
Update 30 April 2014: This tree traversal needs to be rerun whenever a new element is added to the tree, but it seems from a comment by @Han that it is possible to avoid this by adding a mousedown
event handler that sets unselectable
on the target of the event. See http://jsbin.com/yagekiji/1 for details.
This still doesn't cover all possibilities. While it is impossible to initiate selections in unselectable elements, in some browsers (Internet Explorer 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.
*.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.
Until CSS 3's user-select property becomes available, Gecko-based browsers support the -moz-user-select
property you already found. WebKit and Blink-based browsers support the -webkit-user-select
property.
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.
A JavaScript solution for Internet Explorer is:
onselectstart="return false;"
ondragstart
!
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;
}
p, input { -webkit-user-select: text; -khtml-user-select: text; -moz-user-select: text; -o-user-select: text; user-select: text; }
-moz-none
and none
are the same.
ul>* { -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: -moz-none; -o-user-select: none; user-select: none; }
[selects everything in an unordered list, and makes it un-selectable, rather than trashing the whole view tree.] Thanks for the lesson. My button list is looking great, and responding correctly to screen tapping and pressing, rather than launching an IME (android clipboard widgets).
In the solutions in previous answers selection is stopped, but the user still thinks you can select text because the cursor still changes. To keep it static, you'll have to set your CSS cursor:
.noselect { cursor: default; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
Selectable text.
Unselectable text.
This will make your text totally flat, like it would be in a desktop application.
user-select: none;
, thinking the standard would be adopted by now, but sadly it has not. Makes you wonder what the people on the standards committee could still be debating. "No, you guys... I really think it should be user-select: cant;
because it's like more descriptive, you know?" "We've been over this, Mike. We would have to omit the apostrophe, and that's bad form!" "Enough, everyone! We will deliberate on this matter again next month. Standards Committee meeting adjourned!"
You can do so in Firefox and Safari (Chrome also?)
::selection { background: transparent; }
::-moz-selection { background: transparent; }
Workaround for WebKit:
/* Disable tap highlighting */
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
I found it in a CardFlip example.
transparent
in lieu of rgba also works in Chrome 42 on Android.
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;
-ms-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 && $.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: Internet Explorer 9 may not need this extra jQuery piece, so you may want to add a version check in there.
-moz-user-select: Normal;
jQuery.browser
has been deprecated as of version 1.3 and has been removed in version 1.9 - api.jquery.com/jQuery.browser
.hidden:after { content: attr(data-txt); }
It's not the best way, though.
title
as the attribute.
user-select
doesn't work for.
You can use CSS or JavaScript for that.
The JavaScript way is supported in older browsers, like old versions of Internet Explorer as well, but if it's not your case, use the CSS way then:
HTML/JavaScript:
And I'm the text, I won't be selected if you select me.
HTML/CSS:
.not-selectable { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
And I'm the text, I won't be selected if you select me.
For Internet Explorer in addition, you need to add pseudo class focus
(.ClassName:focus) and outline-style: none
.
.ClassName,
.ClassName:focus {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
outline-style: none; /* Internet Explorer */
}
className
class. See this JSBin.
Try to insert these rows into the CSS and call the "disHighlight" at class property:
.disHighlight {
user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
-webkit-touch-callout: none;
-o-user-select: none;
-moz-user-select: none;
}
A Quick Hack Update
If you use the value none
for all the CSS user-select
properties (including browser prefixes of it), there is a problem which can be still occurred by this.
.div {
-webkit-user-select: none; /* Chrome all / Safari all */
-moz-user-select: none; /* Firefox all */
-ms-user-select: none; /* Internet Explorer 10+ */
user-select: none; /* Likely future */
}
As CSS-Tricks says, the problem is:
WebKit still allows the text to be copied, if you select elements around it.
You can also use the below one to enforce
that an entire element gets selected which means if you click on an element, all the text wrapped in that element will get selected. For this all you have to do is changing the value none
to all
.
.force-select {
-webkit-user-select: all; /* Chrome 49+ */
-moz-user-select: all; /* Firefox 43+ */
-ms-user-select: all; /* No support yet */
user-select: all; /* Likely future */
}
With SASS (SCSS syntax)
You can do this with a mixin:
// Disable selection
@mixin disable-selection {
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Safari */
-khtml-user-select: none; /* Konqueror HTML */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */
}
// No selectable element
.no-selectable {
@include disable-selection;
}
In an HTML tag:
<div class="no-selectable">TRY TO HIGHLIGHT. YOU CANNOT!</div>
Try it in this CodePen.
If you are using an autoprefixer you can remove other prefixes.
Browser compatibility here.
For those who have trouble achieving the same in the Android browser with the touch event, use:
html, body {
-webkit-touch-callout: none;
-webkit-user-select: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-tap-highlight-color: transparent;
}
-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');
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.
This works in some browsers:
::selection{ background-color: transparent;}
::moz-selection{ background-color: transparent;}
::webkit-selection{ background-color: transparent;}
Simply add your desired elements/ids in front of the selectors separated by commas without spaces, like so:
h1::selection,h2::selection,h3::selection,p::selection{ background-color: transparent;}
h1::moz-selection,h2::moz-selection,h3::moz-selection,p::moz-selection{ background-color: transparent;}
h1::webkit-selection,h2::webkit-selection,h3::webkit-selection,p::webkit-selection{ background-color: transparent;}
The other answers are better; this should probably be seen as a last resort/catchall.
Suppose there are two div
s like this:
.second { cursor: default; user-select: none; -webkit-user-select: none; /* Chrome/Safari/Opera */ -moz-user-select: none; /* Firefox */ -ms-user-select: none; /* Internet Explorer/Edge */ -webkit-touch-callout: none; /* iOS Safari */ }
Set cursor to default so that it will give a unselectable feel to the user.
Prefix need to be used to support it in all browsers. Without a prefix this may not work in all the answers.
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. It will work in Internet Explorer 9 or later.
color: inherit;
maybe.
Add this to the first div in which you want to disable the selection for text:
onmousedown='return false;'
onselectstart='return false;'
NOTE:
The correct answer is correct in that it prevents you from being able to select the text. However, it does not prevent you from being able to copy the text, as I'll show with the next couple of screenshots (as of 7th Nov 2014).
https://i.stack.imgur.com/gcKTY.png
https://i.stack.imgur.com/xwPld.png
https://i.stack.imgur.com/Ex6UH.png
As you can see, we were unable to select the numbers, but we were able to copy them.
Tested on: Ubuntu, Google Chrome 38.0.2125.111.
It is easily done with:
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
Alternatively:
Let's say you have a <h1 id="example">Hello, World!</h1>
. You will have to remove the innerHTML of that h1
, in this case Hello, World. Then you will have to go to CSS and do this:
#example::before // You can of course use **::after** as well.
{
content: 'Hello, World!'; // Both single-quotes and double-quotes can be used here.
display: block; // To make sure it works fine in every browser.
}
Now it simply thinks it is a block-element, and not text.
To get the result I needed, I found I had to use both ::selection
and user-select
input.no-select:focus {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
input.no-select::selection {
background: transparent;
}
input.no-select::-moz-selection {
background: transparent;
}
This is not CSS, but it is worth a mention:
$("your.selector").disableSelection();
Check my solution without JavaScript:
li:hover { background-color: silver; } #id1:before { content: "File"; } #id2:before { content: "Edit"; } #id3:before { content: "View"; }
Popup menu with my technique applied: http://jsfiddle.net/y4Lac/2/
Though this pseudo-element was in drafts of CSS Selectors Level 3, it was removed during the Candidate Recommendation phase, as it appeared that its behavior was under-specified, especially with nested elements, and interoperability wasn't achieved.
It's being discussed in How ::selection works on nested elements.
Despite it is being implemented in browsers, you can make an illusion of text not being selected by using the same color and background color on selection as of the tab design (in your case).
Normal CSS Design
p { color: white; background: black; }
On selection
p::-moz-selection { color: white; background: black; }
p::selection { color: white; background: black; }
Disallowing users to select the text will raise usability issues.
I have learned from the CSS-Tricks website.
user-select: none;
And this also:
::selection {
background-color: transparent;
}
::moz-selection {
background-color: transparent;
}
::webkit-selection {
background-color: transparent;
}
Success story sharing
standard-user-select
. then we won't have these problems. although for backwards compatibility we should include the others as well. so now the code becomes-webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; standard-user-select: none;
. ah, much better.-webkit-user-select: none;
line using Safari on iOS 15.1.