The user-select property in CSS 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. There is no spec for this property (non-standard) so it's unlikely to change until there is.

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

The reset value is all, which makes selection happen normally as you expect.

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

Chrome Safari Firefox Opera IE Android iOS
Any Any Any 27+ 10+ 4.1+ 7.1+


  1. Gabo
    Permalink to comment#

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

  2. Lampslave
    Permalink to comment#

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

  3. Cupidvogel
    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. David
    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.

    • David
      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. Wk_of_Angmar
    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. 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. oluc

    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. Sander
    Permalink to comment#

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

  9. 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. Lola
    Permalink to comment#

    does this work in PDF?

  11. Shekhar
    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)?

    • 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. 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. 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. jim
    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. JK
    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. 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. Mark
    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. Mark
    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. anon
    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.

Leave a Comment

Posting Code

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in in triple backtick fences like this:

  function example() {
    element.innerHTML = "<div>code</div>";

We have a pretty good* newsletter.