Grow your CSS skills. Land your dream job.

user-select

Last updated on:

The user-select property 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+ */

  /* No support for these yet, use at own risk */
  -o-user-select: none;
  user-select: none;          
}

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.

View Demo

More Information

Browser Support

Chrome Safari Firefox Opera IE Android iOS
Any Any Any Nope 10+ ? ?

Comments

  1. Gabo
    Permalink to comment#

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

    • sachou

      hi, did you find the solution for the Android issue ?

      It seems that’s related the device , since i tried on a Samsug galaxy Note 2 , and the issue isn’t there, however in Asus & Samsung Galaxy Tab Note 2 , the issue’s here .

      Regards .

    • Found a weird behavior: It causes input text fields not to receive text…

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

Leave a Comment

Posting Code

  • Use Markdown, and it will escape the code for you, like `<div class="cool">`.
  • Use triple-backticks for blocks of code.
    ``` 
    <div>
      <h1>multi-line block of code</h1>
      <span>be cool yo.</span>
    </div>
    ```
  • Otherwise, escape your code, like <code>&lt;div class="cool"&gt;</code>. Markdown is just easier though.

Current ye@r *

*May or may not contain any actual "CSS" or "Tricks".