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

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

Quick hack update: March 2017 -from CSS-Tricks

If you put the value 'none' for all the CSS user select attributes as showed in below, 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-Trick says the problem is:

  • WebKit still allows the text to be copied if you select elements around it.

So you can also use the below one instead to enforce that an entire element getting selected which is the solution for the problem. All you have to do is changing the value 'none' to 'all' which would look like this:

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

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

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

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

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

Try insert this rows to 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;
}

@carefulnow1 2016-12-13 09:22:29

Seems like a copy of the accepted answer except you added cursor: default in the middle, for some reason. The question asker did not ask for the cursor to be set to default.

@user1012506 2016-12-13 11:20:59

My source code.

@carefulnow1 2016-12-13 13:36:52

You may of typed in in, however the general code is a direct copy of this, on the first page of this thread: stackoverflow.com/a/4407335/3016335.

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

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>, What you will have to do is 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 ofc 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.

@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; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}
<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)

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

@太極者無極而生 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

@Arindam Sarkar 2019-05-10 10:34:30

nice one it's works well.

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

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

You can use CSS or JavaScript for that, JavaScript way is supported in Older browsers like Old IEs 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>

@Gh61 2018-05-14 13:48:05

The javascript version is not fully working as intended. If you start selecting under the text and then move your cursor up the text will be selecting just fine.

@Alireza 2018-05-14 13:54:13

@Gh61 it was because was applied to body and the Run code snippet make a html tag around it, so if apply it to <html> it will do it, look at the update

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

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

Maybe you can use this solution throught :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.

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

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

You can use User-select property as below for that..

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

Link for the Detailed Description

@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 it's 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 give any color if you wanted to get it highlighted, else yo u can give none.

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

@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

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

@dudewad 2016-01-07 21:33:05

@Volker E. well, he DOES say that it's for the android browser only, you could just add that to the other answers instead of being sarcastic.

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

@Mohammed Javed 2016-04-01 11:16:39

I have learned from CSS-Tricks website.

user-select: none;

And this also:

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

@SemanticZen 2015-05-14 00:13:18

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

@Tim Down 2010-12-05 11:45:11

In most browsers, this can be achieved using proprietary variations on the CSS user-select property, originally proposed and then abandoned in CSS3 and now proposed in CSS UI Level 4:

*.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 < 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 re-run 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 (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.

@Blowsie 2011-01-14 13:15:46

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?

@Tim Down 2011-01-14 13:24:43

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

@Blowsie 2011-01-14 13:49:02

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

@Ian Hunter 2011-07-27 21:41:43

The unselectable attribute does not seem to be working in IE 9

@Tim Down 2011-07-27 22:42:38

@beanland: I can't test this right now, but I'd be surprised if this were the case.

@Tim Down 2011-09-06 14:27:20

@beanland: I've tested the unselectable attribute in IE 9 now and it works fine.

@Chris Calo 2012-01-26 19:39:16

Instead of using the class="unselectable", just use the attribute selector [unselectable="on"] { … }

@Tim Down 2012-01-26 23:17:20

@ChristopherJamesCalo: Yes, that is an option. I've resisted it because adding the unselectable attribute invalidates your HTML and the attribute selector won't work with nodes made unselectable via the unselectable property in JavaScript.

@Francisc 2012-04-24 20:02:31

Please remove the * selector.

@Francisc 2012-04-25 08:35:34

.className gets all elements of a given class name. Adding the * selector will tell it to search for that class name again in all DOM elements on the page. It's necessary and slow.

@Tim Down 2012-04-25 09:32:26

@Francisc: No. As I said to Blowsie earlier in the comments, it makes precisely no difference.

@Francisc 2012-04-25 17:22:30

Browsers parse CSS from right to left. If they are clever enough to ignore *.className, great, but why rely on that? You can't know. It's extra specificity and redundant. I see no difference between what you did and html body .className which again is not needed. If you want to increase specificity for this particular case (not everytime) just use !important because you will always want elements with that class to not be selectable.

@Tim Down 2012-04-25 17:42:16

@Francisc: It isn't any more or less specific. Read the spec: the * is implied if omitted. I explained my reasoning for including it earlier in the comments, which is that I have found it useful in the past to remind myself explicitly that I'm intending matching all elements. I'm certainly not saying everyone should do it. Equally, it's doing no active harm.

@Francisc 2012-04-25 20:32:08

You're right, the * selector has no specificity, I was wrong. I'm still not convinced that browsers don't parse elements twice though.

@Tim Down 2012-04-25 23:17:12

@Francisc: I'd be very surprised if they did. I would expect any difference to disappear at the selector parsing stage rather than the matching stage.

@Tim Down 2012-07-22 16:04:22

@beanland: Turns out you were right: in standards mode only, you need to use setAttribute("unselectable", "on") in IE 9. I've updated my answer.

@BoltClock 2012-08-05 16:50:26

@Francisc: I don't believe RTL parsing applies when evaluating simple selectors in a simple selector sequence. It just doesn't make any sense. Even if browsers do somehow parse *.className twice, then .className would have to be double-parsed as well in order to match the spec (the implied * would have to search all elements as well). Then you get the same hypothetical performance hit, which defeats the purpose of removing the * in the first place. What's the point?

@Francisc 2012-08-07 21:48:42

If browsers do RTL parsing for every kind of rule, there would be a difference. With * it would look for all elements .className, then again filter elements that match * which also have that class. Without the *, it would just look for all elements with .className. But again, I don't know if (all) browsers are clever enough not to double-parse the same elements in the case of *.className.

@Tim Down 2012-08-07 22:32:59

@Francisc: I'd be extremely surprised if any browser acted on the .className part of x.className without parsing x as well. Without parsing the whole selector it can have no idea of the context of the class selector and it would be obviously extremely inefficient to search the whole document unnecessarily.

@BoltClock 2012-08-21 08:24:03

An element will always match * without question. Attempting to match it is only going to waste a browser's time whether it is there or not, so the choice of placing it there is essentially purely stylistic and up to the author's taste. For that matter, what's the point of debating all this anyway?

@Kos 2012-10-10 16:26:38

Can you elaborate on "proposed-but-now-defunct"?

@Tim Down 2012-10-10 17:31:49

@Kos: The link is to an ancient draft from 2000 of a proposal for part of CSS 3, "User Interface for CSS3". I believe that spec was superseded by the CSS3 UI spec, which makes no mention of user-select. I imagine there are mailing list archives containing discussions about its removal somewhere on the web, but I haven't been able to find them.

@Mel 2013-06-14 10:25:14

@TimDown @Francisc I think what he's talking about is * .className instead of *.className. The first one could be slow, depending on the implementation because it means match all elements and for each element, look for all instances of the class regardless of tag name. The second implementation means look for all instances of this class regardless of the tag name which is equivalent to .className. If the implementation is smart enough the difference should be negligible. A worse case is it passes through the whole document twice, the first pass being useless.

@Han Seoul-Oh 2014-04-30 19:38:40

@TimDown: turns out that instead of a full-fledged tree-traversal that won't work if any descendant elements are inserted subsequently, you can just set unselectable on the event.target of mousedown: jsbin.com/yagekiji/1

@Tim Down 2014-04-30 23:12:54

@Han: Great research. You need a bit of extra code for people not using jQuery, since target and preventDefault() are not supported for events in IE <= 8. I've added a note to my answer, I hope you don't mind.

@Han Seoul-Oh 2014-05-15 20:13:53

@TimDown Not at all, that's everything what I was hoping for. Didn't know about .srcElement/.returnValue, I guess I've had a sheltered childhood thanks to jQuery, TIL!

Related Questions

Sponsored Content

97 Answered Questions

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

42 Answered Questions

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

16 Answered Questions

[SOLVED] How to disable resizable property of textarea?

  • 2011-03-08 16:15:40
  • user549757
  • 1188813 View
  • 2383 Score
  • 16 Answer
  • Tags:   html css

38 Answered Questions

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

29 Answered Questions

[SOLVED] Vim clear last search highlighting

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

38 Answered Questions

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

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
  • 1504459 View
  • 2135 Score
  • 28 Answer
  • Tags:   html css opacity

23 Answered Questions

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

20 Answered Questions

[SOLVED] Vertically align text next to an image?

3 Answered Questions

[SOLVED] Get the Highlighted/Selected text

Sponsored Content