The user-select property in CSS controls how the text in an element is allowed to be selected. For example, it can be used to make text unselectable.

.row-of-icons {
  -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 */      

This is useful in situations where you want to provide an easier/cleaner copy-paste experience for users (not have them accidentally text-select useless things, like icons or images). However it's a bit buggy. Firefox enforces the fact that any text matching that selector cannot be copied. WebKit still allows the text to be copied if you select elements around it.

You can also use this to enforce that an entire element gets selection:

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

Here's some demos of those:

See the Pen user-select demo by Chris Coyier (@chriscoyier) on CodePen.

There was no spec for this property for quite a while, but now is covered under CSS Basic User Interface Module Level 4.

The default value is auto, which makes selection happen normally as you expect. "Normally" is a bit complicated. It's worth quoting from the spec here:

  • On the ::before and ::after pseudo elements, the computed value is none
  • If the element is an editable element, the computed value is contain
  • Otherwise, if the computed value of user-select on the parent of this element is all, the computed value is all
  • Otherwise, if the computed value of user-select on the parent of this element is none, the computed value is none
  • Otherwise, the computed value is text

In other words, it intelligently cascades and resets to a sensical state. It looks like maybe this feature could be used to make pseudo elements selectable, but no final word yet.


Firefox supports -moz-none, which is just like none except that it means sub-elements can override the cascade and become selectable again with -moz-user-select: text; As of Firefox 21, none behaves like -moz-none.

Internet Explorer also supports a so-far-proprietary value, element, in which you can select text inside the element but the selection will stop at the bounds of that element.

More Information

Browser Support

This is specifically for -*-user-select: none;

This browser support data is from Caniuse, which has more detail. A number indicates that browser supports the feature at that version and up.



Mobile / Tablet

iOS SafariOpera MobileOpera MiniAndroidAndroid ChromeAndroid Firefox


  1. User Avatar
    Permalink to comment#

    Unfortunately it doesn’t seem to work for android devices… any advice ?

  2. User Avatar
    Permalink to comment#

    Thanks for this trick. You forgot to add -ms-user-select into demo, didn’t You?

  3. User Avatar
    Permalink to comment#

    Although Firefox, Chrome and Safari support it all through, the implementations are slightly different, in Firefox, when one does mousedown on the given element and drags along it to copy text, the cursor remains default type (i.e if it was originally cross-hair it remains cross-hair during the drag, if it was pointer, it remains pointer), whereas in Chrome and Safari, the cursor turns crosshair during the drag, whatever be the original cursor type declaration for that element.

  4. User Avatar
    Permalink to comment#

    Also worth noting, -webkit-user-select causes major hang ups in the current version of safari. After including it on a basic page I was able to make safari freeze by clicking the mouse 6 times in a row.

    • User Avatar
      Permalink to comment#

      Update to my last statement. This only becomes noticeable when safari has around 7000 lines of text on a webpage to render

  5. User Avatar
    Permalink to comment#

    In Firefox, this property value affects the element’s children and therefore you will not be able to select them either. Even manually overriding the children’s CSS properties will not allow you to select them.

    If you wish to manually override the children’s selection, then you must use the property value “-moz-none” instead of “none”.

  6. User Avatar
    David Hemphill

    I’m curious in an app setting, would it be frowned upon to set this to none universally, and then enable it for areas that makes sense to be selectable (a body of copy, copy/paste interfaces, etc…) For me, it seems it could make the experience a little more seamless if someone Cmd/Ctrl-A’s inside the page, or drags too long unintentionally.

  7. User Avatar

    I have on the same line selectable and unselectable text.

    (terminal commands, with comments at the end of some line)

    The comments are indeed unselectable, if I try to select them. Thanks for the trick!

    BUT, when I select several lines (the commands) it DOES highlight also the unselectable parts (the comments), althgough the comments are actually NOT selected (as we see when copy/pasting). It is a visual glitch, which is misleading for the user.

    Does anybody have any trick to disable highlighting of unselectable text?

  8. User Avatar
    Permalink to comment#

    Opera 15 will support this feature, for now with the -webkit prefix.

  9. User Avatar
    Richard Kenny
    Permalink to comment#

    -webkit-user-select: none;

    This breaks password inputs in the version 6.0.2 of Safari.

    A workaround is to define a single line CSS, applied to your password inputs

    .safariPasswordWorkaround { -webkit-user-select: all; }

  10. User Avatar
    Permalink to comment#

    does this work in PDF?

  11. User Avatar
    Permalink to comment#

    what if, I want to make the text really unselectable (not even by source)?
    Actually I want to display a very long code but I want it to be unselectable, so that other users are unable to copy it. they can just ‘view’ it.

    what could be the possible solution(s)?

    • User Avatar
      Richard Kenny
      Permalink to comment#

      Put it in a gif. That’s the easy solution. Won’t stop anyone with free time and a text editor from copying it though.

  12. User Avatar
    Clay Cooper
    Permalink to comment#

    If you’re still getting a user select highlight on Android devices, or anywhere, you might need -webkit-tap-highlight-color: rgba(0,0,0,0); as well.

  13. User Avatar
    David Condrey
    Permalink to comment#

    I like to maintain the highest level of support across browsers, platforms, and versions as possible and have pieced together this bit of code which I use whenever I need to achieve this affect…

    1-webkit-touch-callout: none;-webkit-user-select: none;2-khtml-user-drag: none;-khtml-user-select: none;3-moz-user-select: none;-moz-user-select:-moz-none;-ms-user-select: none;4user-select: none;

    1The -webkit-touch-callout property allows you to dictate what does or doesn’t happen when a user taps and holds on a link on iOS. The default value is default and tap-holding on a link brings up the link bubble dialog; by using the value of none, that bubble never comes up.
    2The -khtml prefix predates the -webkit prefix and provides support for Safari 2.0-
    3The -moz prefix is defined twice with the value none and the value -moz-none on purpose. Using -moz-none rather than none prevents elements and sub-elements from being selectable. However some older browsers like Netscape won’t recognize moz-none so it’s still necessary to define none for them.
    4**Don’t forget, non-prefixed property should be last in line.

  14. User Avatar
    Permalink to comment#

    I would prefer the surfer hone their skills with a mouse to cluttering up the already obfuscatiousness of CSSx-de-jour. Just sayin… :-)

  15. User Avatar
    Permalink to comment#

    I have pages with a lot of user-created text. Users often want to “select all” to paste into email, etc. The text they want is across several long “contenteditables” (think Google Doc but multiple docs in on eweb page). “Select all” makes the most sense, since select and drag makes you have to scroll a lot and also the selection stops when you reach the boundary of the contenteditable.

    But “select all” also selects the “chrome” of the page (nav, etc.) which they don’t want.

    You’d think this “user-select” would be what I want, but the way it works (FF at least) is that “select all” selects the user-select:none text.

    I suppose there is a danger of making it too easy for the devs to make it too hard for users to select text. Still, it might be a nice thing if we could figure it out.

  16. User Avatar
    Malcolm Ocean
    Permalink to comment#

    I have a UI with rows of content that have “buttons” in them too, and I was trying to prevent the buttons from having their text copied too, when people tried to copy the content. What I did was change the text I didn’t want selected from being part of the element to being created by a css :before pseudoelement. It worked like a charm!

    .item a.nevermind-x:before {
      content: "\2715";
  17. User Avatar
    Permalink to comment#

    Hey gang, CSS ‘pointer-select: none;’ has exactly the same behavior, where selection of anything before or after ‘select none’ tag content enables selection of all content in the selection area. There is a cmd processing hack here (somewhere), something CSS-Tricks should be able to bring to light: the parent selection must be made to react in a certain way to the child ‘select none’ element. Prettify.js (“google.code.prettify”) handles this sort of focus management nicely. HTML/CSS workaround?

    pre { counter-reset: line; white-space: pre-wrap; }
    code { counter-increment: line; }
    pre code:before { content: counter(line); margin-right: 3rem; pointer-events: none; }
    pre code:before { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }

    pre { counter-reset: line; }
    code { counter-increment: line; }
    code:before { content: counter(line); user-select: none; }

  18. User Avatar
    Permalink to comment#

    Okay, as an example of cmd influence on coding, consider this code to reveal carat behavior (sorry, limitations here, you’ll have to close the obvious spaces in following code in your device preview)

    PRE and CODE cannot display literal carat symbols. Element tags for carats are hand-coded &lt ; ‘<‘ left carat and &gt ; ‘>’ right carat.

    The display reflex for select-none behavior is almost identical. Attach pointer-events to parent PRE, and attach user-select to child CODE (each line a separate CODE tag) and parent selection happens with outside drag in/across. Cmd-based interference, with nothing outside visibly selected, paste selection reveals inclusion of last pre-PRE character invisibly included in copied selection. Behavior of counter and code is as not selectable from inside PRE or attributed CODE counter. Therefore, the google prettify.js uses attribution in some way as our missing hack would. Which will be another blog post, here at CSS-Tricks.

  19. User Avatar
    Permalink to comment#

    Basically a DRM feature, I’ve just found a site abusing this. All the crud on the page can be selected, but nothing in the article. I want to view a bit of the source to see how their web2.0 malware works, but found they are hindering that.

    FF, and all the modern browsers, are just proprietary application delivery platforms. And for that reason they suck in ways that Windows does. The user should be in control, sites should not be able to do stupid things without the user specifically allowing it.

    • User Avatar
      Permalink to comment#

      There are tons of valid non-DRM use cases for this feature. In my personal case building a custom WYSIWYG editor. Being able to control user selection is an application level feature needed for the types of rich apps being built today.

      Unfortunately, there it still isn’t standardized to a high degree across browsers. Especially when contentEditable becomes involved.

  20. User Avatar
    Mathias Bynens
    Permalink to comment#

    -webkit-user-select: all; /* Chrome 49+ */

    …should be…

    -webkit-user-select: all; /* Chrome 50+ */

  21. User Avatar
    Permalink to comment#

    If you’re using Cordova and iOS you will need to do additional work to suppress the text selection bubble.

  22. User Avatar
    Tracy Goodwin
    Permalink to comment#

    Thank you! I know its been a while since this was wrote but I turned off copy and paste because of other sites stealing my work and claiming it was theirs. But then people couldn’t copy links I was giving them and blogger changed its look and I didn’t know how to turn it off. With one word they can do it again :)

  23. User Avatar
    Jonathan Schofield (@schofeld)

    This is useful in situations where you want to provide an easier/cleaner copy-paste experience for users

    Turns out it’s also useful for Facebook who use it as a #darkpattern to block copy/pasting of Facebook posts when not logged in >:(

  24. User Avatar
    Permalink to comment#

    I’m trying to make some text unselectable and un-copy/pastable. Adding user-select: none; does indeed accomplish that when I test with Chrome and a plain text editor (Atom). But when I paste into Microsoft Word, I get all the text I did not want to select/copy/paste. I’m not familiar with how the clipboard works but this seems odd. Is there a way to prevent text from being copied from the browser and pasted in Microsoft Word?

Leave a Comment

Posting Code!

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.