user-select

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.

Older/Proprietary

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 also reports this feature is in W3C Working Draft status.

Desktop

Google ChromeMozilla FirefoxInternet ExplorerOperaApple Safari
4*2*10*15*3.1*

Mobile / Tablet

iOS SafariAndroidOpera MobileAndroid ChromeAndroid Firefox
3.2*2.1*37*5450*

Comments

  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.

    • roark
      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. Mathias Bynens
    Permalink to comment#

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

    …should be…

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

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 triple backtick fences like this:

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

We have a pretty good* newsletter.