How to disable text selection highlighting

Created 05.05.2009 20:29
Viewed 2.19M times
5526 votes

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?

7
Comments
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? by User, 14.03.2011 21:18
Related: stackoverflow.com/questions/16600479/… = how to allow only some of the child elements to be selected by JK., 17.05.2013 02:36
There a bug in some browsers where doing "Select All" (CTRL+A and CMD+A) still selects things. This can be fought with a transparent selection color: ::selection { background: transparent; } ::-moz-selection { background: transparent; } by DaAwesomeP, 12.12.2014 01:03
Can I just say: please don't do this. From my experience, I more often than not acctually want to select some text that also serves as a button, to copy-paste it somewhere else. It would be unimaginably infuriating not to be able to do that because some web developer went out of their way to purpousely disable this feature for me. So please don't do this unless you have a very, very good reason. by kajacx, 30.08.2016 20:10
@cram2208 I agree except the other question linked is the duplicate. This question is older and has more/better answers. by www139, 15.12.2016 19:14
In year 2017, it is better way to use postcss and autoprefixer and set browser version, then postcss make everything cool. by AmerllicA, 06.12.2017 11:47
The user interface changed. In 2019, all three mentioned items are now in a hamburger menu in the upper left. "Tags" and "Users" are in there, and "Questions" is now called "Stack Overflow" (with an icon in front). by Peter Mortensen, 24.11.2019 12:23
Show remaining 2 comments
Answers 49
3
7825

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 */
}
<p>
  Selectable text.
</p>
<p class="noselect">
  Unselectable text.
</p>


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.

10.12.2010 09:28
Comments
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. by Blowsie, 14.01.2011 13:07
'user-select'- Values: none | text | toggle | element | elements | all | inherit - w3.org/TR/2000/WD-css3-userint-20000216 by Blowsie, 21.03.2011 09:44
this is ridiculous! so many different ways to do the same thing. let's make a new standard for user selects. we will call it 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. by Claudiu, 04.09.2012 16:19
4
895

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.

05.12.2010 11:45
Comments
you should remove the * selector from your example, its really in-efficient and there really isnt any need to use it in your example is there? by Blowsie, 14.01.2011 13:15
@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. by Tim Down, 14.01.2011 13:24
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/… by Blowsie, 14.01.2011 13:49
Instead of using the class="unselectable", just use the attribute selector [unselectable="on"] { … } by Chris Calo, 26.01.2012 19:39
4
211

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.

05.05.2009 20:37
Comments
The buttons thing would be exactly my motivation. by Kriem, 05.05.2009 20:47
This may be necessary for embedded devices. i.e. a device where a browser is used for rendering the UI. by Tim Kersten, 04.11.2009 12:05
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. by Gordon Tucker, 06.01.2010 16:08
Highly interactive web app with a lot of drag & drop... accidental highlighting is a big usability problem. by Marc Hughes, 03.06.2014 21:08
1
205

A JavaScript solution for Internet Explorer is:

onselectstart="return false;"
13.11.2009 16:05
Comments
Don’t forget about ondragstart! by Mathias Bynens, 26.05.2010 13:25
6
146

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;
}
24.05.2011 21:24
Comments
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; } by joshuadelange, 07.07.2011 22:39
Be very wary about turning off browser UI expectations on ALL code except for one item. What about list items <li /> text, for example? by Jason T Featheringham, 12.11.2011 07:13
Just an update... according to MDN since Firefox 21 -moz-none and none are the same. by Kevin Fegan, 25.12.2013 15:56
For this you may add cursor:default and cursor:text respectively : ) by T4NK3R, 14.07.2014 17:14
THE bomb. That is to say. THE END. 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). by Hypersoft Systems, 12.09.2019 06:54
great, Ive using this :) by C Alonso C Ortega, 16.03.2020 19:07
Show remaining 1 comments
2
116

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

::selection { background: transparent; }
::-moz-selection { background: transparent; }
05.05.2009 20:46
Comments
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". by Keithamus, 02.02.2011 15:01
Doesn't work on PNG-images with transparent areas: The will always select in a light blue… Any workaround? by AvL, 18.09.2013 21:12
3
132

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;
}
<p>
  Selectable text.
</p>
<p class="noselect">
  Unselectable text.
</p>

This will make your text totally flat, like it would be in a desktop application.

30.08.2015 18:32
Comments
"Flat" as opposed to what? by kojow7, 09.02.2018 20:55
@kojow7 As opposed to "layered". Instead of text floating on top of the other elements. It is similar to the difference between SVG and PNG images. by Yeti, 19.09.2018 09:35
Was surprised to discover that Firefox still requires the vendor prefix in 2019. I disregardfully used only 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!" by Mentalist, 24.05.2019 03:19
1
83

Workaround for WebKit:

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

I found it in a CardFlip example.

21.09.2011 07:09
Comments
Using transparent in lieu of rgba also works in Chrome 42 on Android. by Clint Pachl, 29.04.2015 20:46
7
82

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.

11.11.2011 19:53
Comments
Use -ms-user-select: none; (for IE10) and your jQuery "if" should be this: if (($.browser.msie && $.browser.version < 10) || $.browser.opera) by mhenry1384, 31.01.2013 03:42
Be careful man !!! To make it selectable in firefox you must use -moz-user-select: Normal; by Nicolas Thery, 10.03.2013 16:53
@mhenry1384 jQuery.browser has been deprecated as of version 1.3 and has been removed in version 1.9 - api.jquery.com/jQuery.browser by WynandB, 14.03.2013 23:58
@Wynand Good point. But what sort of "feature detection" exists to determine which CSS property to use? by Tom Auger, 15.03.2013 13:28
@TomAuger You could use jQuery.support, it allows you to check for single features : Link by Aequanox, 28.03.2013 10:10
Yeah, but what exactly are you going to query in terms of support? I wasn't aware that you could query support for a particular CSS property... by Tom Auger, 28.03.2013 13:59
@PeterMortensen but user-select: none doesnt even work on input elements?!?! you can always still select the text. how do i make user-select: none work on input elements???? by oldboy, 13.11.2019 23:06
Show remaining 2 comments
4
76

.hidden:after {
    content: attr(data-txt);
}
<p class="hidden" data-txt="Some text you don't want to be selected"></p>

It's not the best way, though.

01.05.2013 11:36
Comments
You could also use title as the attribute. by Toothbrush, 07.05.2014 16:50
That is a very creative solution. Especially if it used the title attribute because that would probably be better for screen readers. by pseudosavant, 16.09.2014 21:49
I tried it (JSBin) and it doesn't work in IE. Unfortunately older IEs are the only ones that user-select doesn't work for. by pseudosavant, 16.09.2014 21:58
This is a great non-JS alternative that works in Chrome! Awesome! by saricden, 06.11.2018 15:05
0
74

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:

<html onselectstart='return false;'>
  <body>
    <h1>This is the Heading!</h1>
    <p>And I'm the text, I won't be selected if you select me.</p>
  </body>
</html>

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;
}
<body class="not-selectable">
  <h1>This is the Heading!</h1>
  <p>And I'm the text, I won't be selected if you select me.</p>
</body>

05.06.2017 14:03
1
63

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  */
}
23.12.2013 14:05
Comments
This does work in IE so long as the selection starts on an element with the className class. See this JSBin. by pseudosavant, 16.09.2014 22:01
0
60

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;
}
28.08.2016 07:13
0
56

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  */
}
31.03.2018 11:32
0
51

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;
}
19.05.2014 05:30
0
51

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</div>

Try it in this CodePen.

If you are using an autoprefixer you can remove other prefixes.

Browser compatibility here.

11.10.2019 10:27
2
49

Working

CSS:

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

This should work, but it won't work for the old browsers. There is a browser compatibility issue.

27.02.2014 09:01
Comments
The unprefixed CSS property must be strictly at the end of list of prefixed versions of the property. It is good right practice, other is bad practice making an "new IE" from Chrome/Webkit and leading to so much UGLY THINGS as introducing -webkit prefix support in not webkit browsers. Look, this was already in 2012: dev.opera.com/articles/… by FlameStorm, 21.03.2017 22:52
And I quote: This is because through our site compatibility work, we have experienced that many authors of (especially mobile) sites only use -webkit- prefixed CSS, thereby ignoring other vendor prefixes and not even including an unprefixed equivalent. This leads to a reduced user experience on Opera and Firefox, which don’t receive the same shiny effects such as transitions, gradients and the like, even if the browser supported those effects. by FlameStorm, 21.03.2017 22:52
0
49
-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');
26.10.2012 05:44
0
49

If you are using Less and Bootstrap you could write:

.user-select(none);
18.04.2012 08:34
7
40

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.

05.05.2009 20:38
Comments
While I agree that it changes behaviour the user expects, it would make sense for things like the "Add Comment" button that is sitting next to this form field ... by X-Istence, 05.05.2009 20:40
But doesn't that expose needless implementation details? An input or button's text can't be selected. by User, 05.05.2009 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… by hbw, 05.05.2009 20:49
If you're selecting a set of comments from a chat thread and each comment has an upvote/downvote button next to it, then it would be nice to select the text without the other stuff. That's what the user expects or wants. He doesn't want to copy/paste the button labels with every comment. by Mnebuerquo, 03.08.2013 16:52
And what if you for example double click a button which instead of redirecting you to another page opens a div? then the text for the button will be selected due to the double-click! by Gigala, 25.07.2014 11:32
Make the things you want selectable - selectable... and nothing else. by sheriffderek, 26.03.2016 01:28
Selecting records in a table is another exception. If you want to enable holding shift/control to select and highlight multiple records, then you have to disable text-selection. by bvdb, 28.08.2017 08:12
Show remaining 2 comments
0
21

Check my solution without JavaScript:

jsFiddle

li:hover {
    background-color: silver;
}
#id1:before {
    content: "File";
}
#id2:before {
    content: "Edit";
}
#id3:before {
    content: "View";
}
<ul>
    <li><a id="id1" href="www.w1.com"></a>
    <li><a id="id2" href="www.w2.com"></a>
    <li><a id="id3" href="www.w3.com"></a>
</ul>

Popup menu with my technique applied: http://jsfiddle.net/y4Lac/2/

22.02.2014 22:06
1
37

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.

09.04.2014 22:56
Comments
There are few things that can be known for sure, but this solution definitely doesn't work in all browsers. by Volker E., 30.09.2014 09:27
0
36

Suppose there are two divs 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 */
}
<div class="first">
  This is my first div
</div>

<div class="second">
  This is my second div
</div>

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.

28.03.2016 09:42
2
33

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.

03.04.2013 08:31
Comments
Make that color: inherit; maybe. by Yaakov Ainspan, 28.07.2016 01:25
yeah I love it. It's css selector level 3 according to Mozilla docs by Bariq Dharmawan, 28.01.2018 10:37
0
32

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

onmousedown='return false;' 
onselectstart='return false;'
30.10.2012 06:56
1
30

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).

Before we have selected anything

After we have selected

The numbers have been copied

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.

07.11.2014 13:22
Comments
I've had the same problem. On Mac Chrome 48.0.2564.116 and on Mac Safari 9.0.3. Notably, Mac Firefox 43.0 doesn't copy the character, but sticks extra endlines between them. What should be done about this? by NHDaly, 05.03.2016 01:34
0
27

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;
}
14.05.2015 00:13
0
27

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.

08.11.2018 09:17
0
23

This is not CSS, but it is worth a mention:

jQuery UI Disable Selection:

$("your.selector").disableSelection();
09.04.2013 16:42
1
21

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.

21.03.2014 13:53
Comments
This must be why Netbeans auto-completion has no idea what I am talking about! by halfer, 26.04.2014 20:16
0
16

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;
}
01.04.2016 11:16
0
14

If you want to disable selection and highlighting for the whole page you can easily do this with CSS:

* {
    -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 */
}
30.04.2018 03:47
0
11

Try to use this one:

::selection {
    background: transparent;
}

And if you wish to specify not select inside a specific element, just put the element class or id before the selection rule, such as:

.ClassNAME::selection {
    background: transparent;
}
#IdNAME::selection {
    background: transparent;
}
20.01.2016 09:22
1
10

This highlighting effect is due to the action called hover (onMouseHover).

When you will hover on any tab its color will be changed.

Just say for example,

HTML code

<div class="menu">
    <ul class="effect">
        <li>Questions</li>
        <li>JOBS</li>
        <li>Users</li>
    </ul>
</div>

CSS code

.effect:hover {
    color: none;
}

You can use any color if you want to get it highlighted. Else you can use none.

03.06.2016 13:12
Comments
No, what you are talking about is hovering, which means "when the mouse is over the text". It is different from "selecting the text". By default there is no color when hovering. by Flyout91, 28.07.2017 09:23
0
10

Use:

-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
15.04.2016 09:29
0
10

You can use a *-user-select property as below for that...

p {
    -webkit-user-select: none;  /* Chrome all and Safari all */
    -moz-user-select: none;     /* Firefox all */
    -ms-user-select: none;      /* Internet Explorer 10 and later */
    user-select: none;          /* Likely future */
}

Link for the Detailed Description

06.09.2016 09:04
0
7

With CSS-

div {
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -o-user-select: none;

  "unselectable='on' onselectstart="return false;"
  onmousedown="return false;
}
<div>
  Blabla
  <br/> More Blabla
  <br/> More Blabla...
</div>

22.09.2018 14:23
0
8

Add a class to your CSS that defines you cannot select or highlight an element. I have an example:

<style> 
    .no_highlighting{
        user-select: none;
    }

    .anchor_without_decoration:hover{
        text-decoration-style: none;
    }
</style>

<a href="#" class="anchor_without_decoration no_highlighting">Anchor text</a>
06.03.2020 10:33
0
8

Did you tried this?

.disableSelect{
    user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    -webkit-touch-callout: none;
    -o-user-select: none;
    -moz-user-select: none;

    pointer-events:none;
}
03.09.2020 14:14
0
4

Even better, you can disable text selection.

If you like Sass (SCSS), and you don't want to use Compass you can do this:

styles.scss

@mixin user-select($select) {
    -webkit-touch-callout:#{$select};
    @each $pre in -webkit-, -moz-, -ms-, -o-, -khtml- {
        #{$pre + user-select}: #{$select};
    }
    #{user-select}: #{$select};
}

.no-select {
    @include user-select(none);
}
31.01.2018 00:05
0
4

I combined the various browser CSS select attributes with the unselectable tag required for Internet Explorer < 9.

<style>
[unselectable="on"] {
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer 10+/Edge */
    user-select: none; /* Standard */
}
</style>
<div unselectable="on">Unselectable Text</div>
01.02.2018 20:23
1
1

Maybe you can use this solution through :before:

nav li {
    display: inline-block;
    position: relative;
}

nav li a {
    display: inline-block;
    padding: 10px 20px;
}

nav li a:hover {
    color: red;
}

nav li.disabled:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}
<nav>
    <ul>
    <li><a href="#">Link</a></li>
    <li class="disabled"><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    </ul>
</nav>

JsFiddle - https://jsfiddle.net/grinmax_/9L1cckxu/

02.03.2017 17:34
Comments
This is not an answer, you can still select the text. by codeWithMe, 12.11.2018 08:49
4
1
::selection {background: transparent; color: transparent;}

::-moz-selection {background: transparent; color: transparent;}
31.10.2018 06:13
Comments
Can you explain further what you mean by this? How does this improve the other highly upvoted answers? by Nico Haase, 31.10.2018 08:22
This does not disable the text-selection, all it does is hide it for the user. The computer itself still knows it is being selected, the background-color is just transparent. But if you press ctr (cmd on mac) + A and then copy you can paste the text somewhere else. by codeWithMe, 20.11.2018 19:12
An explanation would be in order. by Peter Mortensen, 10.05.2019 01:40
It helped me with html-page on iPad! Thank you! by Alekzander, 29.06.2019 10:56
0
2

A JavaScript-based solution for Internet Explorer is:

onselectstart="return false;"

21.04.2020 09:28
0
2

The user-select is currently supported in all browsers.


These are all of the available correct CSS variations:

.noselect {
  -webkit-user-select: none;    /* Safari */
  -webkit-touch-callout: none;  /* iOS Safari */
  -khtml-user-select: none;     /* Konqueror HTML */
  -ms-user-select: none;        /* Internet Explorer/Edge */
  -moz-user-select: none;       /* Old versions of Firefox */
   user-select: none;           /* Non-prefixed version*/
}
<p>
  Selectable
</p>

<p class="noselect">
  Unselectable
</p>


03.05.2021 18:20
2
-3
<script type="text/javascript">

if(typeof document.onselectstart!="undefined"){
document.onselectstart=new Function ("return false");
}
else{
document.onmousedown= new Function ("return false");
document.onmouseup= new Function ("return true");
}
</script>
06.12.2019 12:54
Comments
Hi and welcome to stackoverflow, and thank you for your answer. Rather than just posting a block of code, can you give a short explanation to what the issue is you solved and how you solved it? This will help people who find this question in the future to better understand the issue and how to deal with it. by Plutian, 06.12.2019 13:13
OP asked if there is any good CSS solution for that, not javascript. by Julio Vedovatto, 22.01.2020 15:06
0
0

You may also want to prevent the context menu appearing when touching elements like buttons that have their selection prevented. To do that, add this code to the entire page, or just those button elements:

$("body").on("contextmenu",function(e){
    return false;
});
27.08.2019 07:17
1
-1

The right solution for CSS:

There's a bug without getting a resolver yet, so we can make use of it:

::-moz-selection {
}

::selection {
}

And voilà, there isn't any highlighting, but because of a bug, or a feature?

Here you have a demo, try to select text!!!

21.11.2019 11:52
Comments
I don't see how this would work - the demo allows me to freely select anything. by Ian H., 12.02.2021 11:59
1
-1

This may work

    ::selection {
        color: none;
        background: none;
    }
    /* For Mozilla Firefox */
    ::-moz-selection {
        color: none;
        background: none;
    }
17.01.2020 01:01
Comments
When adding answers to ten year old questions with forty four other answers the bar is higher. It is useful to address in your answer what new aspect of the question your answer addresses and how the passage of time an emergence of new technologies has impacted the answer. The answer should also explain how and what the code does. by Jason Aller, 17.01.2020 02:43