By anon


2009-05-05 20:29:18 8 Comments

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?

30 comments

@Ale_info 2019-10-11 10:27:13

With SASS you can do this:

// 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 HTML tag:

<div class="no-selectable">TRY TO HIGHLIGHT</div>

@Blowsie 2010-12-10 09:28:22

UPDATE January, 2017:

According to Can I use, the user-select is currently supported in all browsers except Internet Explorer 9 and earlier versions (but sadly still needs a vendor prefix).


All of the correct CSS variations are:

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


Note that it's a non-standard feature (i.e. not a part of any specification). It is not guaranteed to work everywhere, and there might be differences in implementation among browsers and in the future browsers can drop support for it.


More information can be found in Mozilla Developer Network documentation.

@molokoloco 2011-01-14 12:13:00

I have made a function to autodetect CSS prefix ;) b2bweb.fr/molokoloco/js-cssprefix

@Blowsie 2011-01-14 13:07:07

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.

@Blowsie 2011-03-21 09:44:40

'user-select'- Values: none | text | toggle | element | elements | all | inherit - w3.org/TR/2000/WD-css3-userint-20000216

@Tim Down 2011-07-03 10:52:17

Actually -o-user-select isn't implemented in Opera. It implements IE's unselectable attribute instead.

@Gary 2011-07-11 18:19:54

Great answer! Do you know if there is a way to override this a child of an element with this style? I've tried x:text !important; x:auto !important; and x:normal !important; to no avail.

@Morteza Milani 2011-08-18 08:06:21

@Fantabulum Children inherit these styles automatically:)

@Gary 2011-08-18 13:54:09

@Morteza: That is correct, the problem is breaking that inheritance...

@Morteza Milani 2011-08-18 15:28:11

sorry! then try to set inherits:none in children. I'm not sure it works or not. but it should.

@robasta 2012-01-20 08:11:49

For some reason, this alone wasnt working in IE8, I then added <div onselectstart="return false;"> to my main div.

@Rudie 2012-04-06 11:10:25

Doesn't work for mobile? Android stock browser still selects text (when touch holding) with all this CSS attached. (Desktop browser doesn't (double click or drag).) On mobile the only way to disable text selection seems to be capturing touchstart, but that disables the entire click event for that element. Ideas?

@Blowsie 2012-04-10 07:41:24

This works on some versions of android but not all. Out of curiosity, which version of Android are you referring to?

@Andre Backlund 2012-04-19 16:46:48

-moz-user-select should be set to -moz-none or you cannot reset user selection on child elements in firefox.

@Tim Down 2012-08-03 16:55:57

@think123: It isn't really as cross-browser as you can get: it doesn't help you in Opera or IE < 10, both of which do provide alternative ways of making content unselectable.

@Claudiu 2012-09-04 16:19:11

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.

@Blowsie 2012-09-05 08:21:24

The debate of browser specific prefixes has been on going for ages. Here is not really the correct place to discuss it. Also why would you bother calling it standard-user-select when you can just call it user-select. For now the best way to get round these differences is building mixins in less or sass or similar.

@Tim Down 2012-09-19 10:54:12

@Claudiu: The reason the prefixed versions have not converged on a standard user-select property is that user-select appeared in an early CSS 3 draft but was later removed, presumably because it was considered to be more concerned with behaviour than styling and hence outside the scope of CSS.

@podperson 2012-10-04 15:51:50

@rob's answer turned out to be the ticket for me. All the CSS (which we already had) did zip in IE8.

@Tim Down 2012-10-06 23:00:52

@podperson: There is a non-CSS and non-JavaScript option in IE 8, which is the unselectable attribute.

@Slava Fomin II 2012-10-12 13:46:36

It's not working in Opera 12.02 though.

@Tim Down 2012-10-15 21:37:55

@SlavaFominII: What isn't working in Opera 12.02?

@Slava Fomin II 2012-10-16 01:39:18

@TimDown i can't get the expected results with styles specified in this answer in my Opera 12.02 on XUbuntu-box and i think it worth mentioning.

@Tim Down 2012-10-16 08:24:36

@SlavaFominII: Right. Yes, Opera does not implement a proprietary user-select CSS property.

@Primus202 2013-03-15 22:15:37

This is great and prevents all mouse highlighting, though if I do "Edit->Select All" it still highlights.

@Bjørn Stenfeldt 2013-04-17 13:56:15

<SHIFT> + <LMB> or <CTRL> + <SHIFT> + <LMB> in IE10 will select everything even if you click inside an element with this style. Not on Chrome or Firefox though. I found that putting the style on the BODY element solved the problem. But this of course disables selection on the entire page, which could be a problem in some cases.

@VoidKing 2013-04-19 15:55:37

@BjornStenfeldt Actually, just highlighting and selecting as normal will select anything in IE 10 with the above CSS (and 9 for that matter). I have to -1 this answer (like it matters) because I came here so I could replace the deprecated "unselectable" attribute, but alas, I cannot (the red squiggly line remains, and my eye-twitch continues). His CSS works great for all browsers except IE (which means he has either not included a rule or no such rule exists for IE 9 & 10 [not sure about 8 and below]). Either way, he should have said something about this in his answer.

@VoidKing 2013-04-19 16:06:38

@blowsie I guess 1,318 viewers (at the time of this writing) don't have clients that will use IE... As satisfying as I find that assumption, I also find it hard to believe. Great job on the other CSS rules, though. It was good of you to include -webkit-touch-callout: none;. I wouldn't have thought of that.

@VoidKing 2013-04-19 16:07:46

@Blowsie One more thing: what's the point in including -ms-user-select: none;? Doesn't "ms" stand for Microsoft? Maybe this rule targets IE 8 and below?

@Pluto 2013-06-03 17:17:23

@VoidKing Using the -ms browser prefix actually does work for IE 10, and not for IE 8. Not sure about IE 9.

@Julian F. Weinert 2013-06-16 22:28:45

I'd suggest adding cursor:default; to not indicate selectibility to the user

@Blowsie 2013-06-17 07:37:45

@Julian, its not quite as simple as that, what if the element is a link or contains links?

@Anselm 2013-06-23 12:01:09

Use prefixfree.js, so you can leave out all the prefixes!

@Stano 2013-08-03 18:22:59

That -moz-user-select: moz-none; rule doesn't work in latest Firefox 22, please fix it with the correct value: -moz-user-select: none; (used it here: jsfiddle.net/jdNa9/3 ) Thank you.

@bergie3000 2014-02-14 00:00:01

@Claudix 2014-10-07 10:31:06

In IE 11, if you click at the beginning of "Unselectable text", press shift, and then click at the end of it, then the text becomes selected.

@Samy S.Rathore 2015-02-16 07:53:34

Internet Explorer has a bug with this CSS code. If you start selection from the Selectable text and continue to drag down, then you can select the unselectable text.

@Toothbrush 2015-08-02 18:42:35

@Blowsie Why is -khtml-user-select necessary? Does Konqueror actually support it? I can't seem to find any documentation on it, but then I've never used Konqueror.

@Blowsie 2015-08-04 07:35:33

@toothbrush Its for old versions of Safari (less than 2.0)

@Mars Robertson 2015-08-04 14:36:40

As mentioned in one of the previous comments - "How standards proliferate" - xkcd.com/927

@Toothbrush 2015-08-05 12:48:35

@Blowsie Wow, Safari < 2.0... Never thought of that! So, I don't need to include it for compatibility, unless I need to support every possible browser?

@ChocolateAndCheese 2015-09-01 22:30:45

I can select the unselectable text in the example you provided in (IE 11, Windows 8.1) on touchscreen laptop by double tapping the text. Is there a way to prevent this behavior?

@NoOneIsHere 2016-06-20 17:24:06

@Elad Nava 2016-12-01 13:55:17

user-select: none; seems to work in Chrome now. Good enough for me.

@Triynko 2017-01-30 19:28:04

Pathetic. This kind of feature has been available in Flash since AS1 for nearly two decades. help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/‌​… So much for standards.

@BlueRaja - Danny Pflughoeft 2017-02-06 18:14:25

Everywhere I read says user-select: none is supported in the latest Firefox (Feb 2017), but it's not. The dev tools cross it out with the message "invalid property value". I still need to use -moz-user-select: none to get no-selection working.

@nopole 2017-12-14 04:55:16

Could you maybe add whether using body { /* ..., etc */ user-select: none; } would work well. Or html { /* ..., etc */ user-select: none; }

@mbomb007 2018-03-21 16:14:46

This doesn't work with a contenteditable div.

@Yeti 2018-09-19 09:42:13

@Claudiu The reason for vendor prefixes is that they may have differences in implementation. In the case of user-select, e.g. the inheritance of absolutely positioned elements is implemented inconsistently. But I agree that careful usage of a wildcard to target all prefixes could've been useful for code readability.

@Blowsie 2018-10-31 15:03:35

@codespy rolling back since the question asks for a valid css solution

@Webwoman 2019-01-21 16:16:47

seems internet explorer want to die with all this new technologies lagging

@Gustavo Rodríguez 2019-06-24 13:44:05

::selection {} or p::selection{} can do the same. No idea why nobody has mentioned it. OP asked the standard css way to "disable the highlighting effect"

@Amir A. Shabani 2019-09-16 06:31:42

Version 69 of Firefox supports user-select.

@GeekyMonkey 2019-08-27 07:17:04

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

@Kaz 2018-03-31 11:32:06

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;     /* IE 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  */
}

@codeWithMe 2018-11-08 09:17:26

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 a text.

@Yevgeniy Afanasyev 2018-01-31 00:05:39

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

@Alireza 2017-06-05 14:03:58

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>

@grinmax 2017-03-02 17:34:38

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/

@codeWithMe 2018-11-12 08:49:08

This is not an answer, you can still select the text.

@Chirag Dave 2016-09-06 09:04:22

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

@user1012506 2016-08-28 07:13:16

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

@Pushp Singh 2016-06-03 13:12:16

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.

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

@Flyout91 2017-07-28 09:23:13

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.

@Pekka 웃 2009-11-13 16:05:58

A JavaScript solution for Internet Explorer is:

onselectstart="return false;"

@Mathias Bynens 2010-05-26 13:25:39

Don’t forget about ondragstart!

@TheBrain 2013-05-30 16:56:05

one more thing here. If you add that to the body then you won't be able to select text inside textareas or input fields in IE. The way I fixed it for IE . body.onselectstart = function(e) { if (e.target.nodeName != "INPUT" && e.target.nodeName != "TEXTAREA") { e.preventDefault(); return false; } return true; }

@Matt 2013-06-05 15:06:46

This can be added as an attribute using jQuery - $("p").attr("onselectstart","return false") This was the only reliable method for me in IE8

@Abudayah 2013-10-31 10:43:03

why I have use javascript when I have multi css solutions!..

@Pekka 웃 2013-10-31 13:27:22

@Abudayah because they don't work in older versions of Internet Explorer? That's, like, the entire point of this answer.

@Navneet Kumar 2018-10-31 06:13:51

::selection {background: transparent; color: transparent;}

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

@Nico Haase 2018-10-31 08:22:29

Can you explain further what you mean by this? How does this improve the other highly upvoted answers?

@codeWithMe 2018-11-20 19:12:46

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.

@Peter Mortensen 2019-05-10 01:40:56

An explanation would be in order.

@Alekzander 2019-06-29 10:56:17

It helped me with html-page on iPad! Thank you!

@jasonleonhard 2018-04-30 03:47:18

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 */
  }

@omikes 2018-02-01 20:23:34

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>

@Abrar Jahin 2018-09-22 14:23:07

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>

@Ale 2013-05-01 11:36:36

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

@Toothbrush 2014-05-07 16:50:34

You could also use title as the attribute.

@pseudosavant 2014-09-16 21:49:55

That is a very creative solution. Especially if it used the title attribute because that would probably be better for screen readers.

@pseudosavant 2014-09-16 21:58:23

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.

@saricden 2018-11-06 15:05:40

This is a great non-JS alternative that works in Chrome! Awesome!

@ZECTBynmo 2015-08-30 18:32:57

In the above solutions 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.

@kojow7 2018-02-09 20:55:53

"Flat" as opposed to what?

@Yeti 2018-09-19 09:35:59

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

@Mentalist 2019-05-24 03:19:36

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!"

@Gaurav Aggarwal 2016-03-28 09:42:03

Suppose there are two div like this

.second {
  cursor: default;
  user-select: none;
  -webkit-user-select: none;
  /* Chrome/Safari/Opera */
  -moz-user-select: none;
  /* Firefox */
  -ms-user-select: none;
  /* IE/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 user/

Prefix need to be use to support it in all browsers without prefix this may not work in all the answers.

@X-Istence 2009-05-05 20:37:10

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.

@Kriem 2009-05-05 20:47:17

The buttons thing would be exactly my motivation.

@Tim Kersten 2009-11-04 12:05:52

This may be necessary for embedded devices. i.e. a device where a browser is used for rendering the UI.

@codeinthehole 2009-11-13 16:19:08

Being able to [ctrl-a], [ctrl-c] only the text content portion of a site would be useful imo.

@Gordon Tucker 2010-01-06 16:08:11

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.

@Kyle Fox 2010-04-29 21:37:23

We have a product that delivers exams to end users electronically, and our publishers want to take as many measures as possible to prevent users from easily copying & pasting their content.

@Craig M 2011-03-15 20:34:20

There are also legal issues where someone else's content is being legally republished but a clause in the license requires web publishers to prevent text from being easily copied and pasted. This is what led me to find this question. I don't agree with the requirement but the company I'm contracting for is legally obligated to implement it this way.

@ErikE 2012-11-21 19:09:04

@CraigM If you want to make text unselectable, use an image library such as csImageFile to create images from the text. Users can still print, but will not be able to get the original text without typing it or performing OCR.

@Dread Boy 2013-12-25 19:30:53

Creating Cookie-Clicker-type game in browser is my motivation why I would like to disable text selection.

@Agile Jedi 2013-12-26 23:25:50

@CraigM The css style doesn't stop a person from grabbing the HTML source and copying it. If you want to protect your content you'll have to find better ways.

@Craig M 2013-12-27 17:47:46

@AgileJedi - Obviously. My comment was addressing the question of why someone would want to disable text selection in the first place. The contractual requirement I mentioned recognized that html source cannot be protected, but required in browser text selection to be disabled. In any case, I've long since moved on from that contract.

@user2808054 2014-04-02 14:23:02

Some users have a habit of clicking several times on text which selects not only the text they're after but buttons around it too or other undesirables- eg an entire input field control (not just the content). If you consider an applcation delivered via web browser (as opposed to just a website on the interner), disabling select where it's not desirable would be pretty handy. Shame it's such a faff.

@AnjoMan 2014-04-29 18:12:04

What if you are trying to make a touch compatible web app and you don't want the user to accidently engage the click-drag feature?

@starbeamrainbowlabs 2014-05-30 17:34:30

If I have a couple of elements in the background of a page, it would help if they couldn't be selected.

@Marc Hughes 2014-06-03 21:08:07

Highly interactive web app with a lot of drag & drop... accidental highlighting is a big usability problem.

@Scott Marcus 2017-08-18 15:49:44

In my case, this will be an application running in a browser on with a touchscreen monitor. There will be no keyboard interface, only touch. Buttons that have text in them can become inadvertently selected by touching the same button repeatedly. And, as the spec says "None of the element's content can be selected. This is a very important value of user-select for user interface elements in particular. This value is one of the aspects of how a button behaves. The user cannot select any of the content inside the button. "

@JSON 2018-04-28 16:52:52

"The real question is, why do you want users to not be able to highlight and presumably copy and paste certain elements?" God seriously, wtf do you care? I hate answers that include stuff like this. Thanks for your drawn out answer including your opinions on practical application for text highlighting, but it is irrelevant to the question and I am sure the OP cares less about what you like and is trying to make something his own. Can it be done? Yes? Answer how and be done. No? Answer no and be done.

@carkod 2018-09-19 13:32:19

Many sites dont allow you to copy because of copyright reasons

@Codler 2012-04-18 08:34:40

If you are using Less and Bootstrap you could write:

.user-select(none);

@karthipan raj 2013-04-03 08:31:10

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.

@Yaakov Ainspan 2016-07-28 01:25:09

Make that color: inherit; maybe.

@Bariq Dharmawan 2018-01-28 10:37:47

yeah I love it. It's css selector level 3 according to Mozilla docs

@apocalypse 2014-02-22 22:06:41

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/

@suraj rawat 2014-02-27 09:01:50

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 be working, but it won't work for the old browsers. There is a browser compatibility issue.

@FlameStorm 2017-03-21 22:52:27

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

@FlameStorm 2017-03-21 22:52:47

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.

@Suraj Naik 2014-03-21 13:53:43

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 browser, 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.

@halfer 2014-04-26 20:16:19

This must be why Netbeans auto-completion has no idea what I am talking about!

@r3wt 2014-04-09 22:56:24

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.

@Volker E. 2014-09-30 09:27:40

There are few things that can be known for sure, but this solution definitely doesn't work in all browsers.

@scx 2014-11-13 14:03:21

they why you say all browsers.. clearly you can edit better your answer

@r3wt 2014-11-14 11:13:01

@scx the goal of the answer was to provide a starting point. as you can see, there are much better answers than mine anyway. if i have time to take another crack at it in the future, i'll experiment and see what i can come up with.

@Beep.exe 2014-05-19 05:30:01

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

@Luke Madhanga 2014-11-07 13:22:21

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.

@NHDaly 2016-03-05 01:34:58

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?

@mustafa-elhelbawy 2016-01-20 09:22:16

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

@Hetal Rupareliya 2016-04-15 09:29:51

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

Related Questions

Sponsored Content

24 Answered Questions

[SOLVED] How do I style a <select> dropdown with only CSS?

38 Answered Questions

[SOLVED] How do I vertically center text with CSS?

38 Answered Questions

[SOLVED] How to align checkboxes and their labels consistently cross-browsers

17 Answered Questions

[SOLVED] How do I disable the resizable property of a textarea?

  • 2011-03-08 16:15:40
  • user549757
  • 1259659 View
  • 2500 Score
  • 17 Answer
  • Tags:   html css

28 Answered Questions

[SOLVED] How do I give text or an image a transparent background using CSS?

  • 2009-04-30 09:00:02
  • Stijn Sanders
  • 1510758 View
  • 2192 Score
  • 28 Answer
  • Tags:   html css opacity

27 Answered Questions

[SOLVED] How do I make a placeholder for a 'select' box?

101 Answered Questions

[SOLVED] How to horizontally center a <div>?

44 Answered Questions

[SOLVED] How to vertically center a div for all browsers?

20 Answered Questions

[SOLVED] Vertically align text next to an image?

29 Answered Questions

[SOLVED] Vim clear last search highlighting

  • 2009-03-18 09:00:32
  • Gabriel Solomon
  • 457158 View
  • 1811 Score
  • 29 Answer
  • Tags:   vim highlight

Sponsored Content