CSS user-select

By  on  

In my quest to contribute to every Mozilla project possible, I spent some time last Friday making updates to Firefox DevTools.  The JSON Viewer component needed some love so that was first on my list.  While viewing the CSS for the JSON Viewer component, I saw something I hadn't recognized:  CSS user-select:

.heading {
  -moz-user-select: none; /* don't allow selection */
}

After a bit of research, I found that you can control what content can be is selected using CSS:

  .dont-select {
    user-select: none;
  }

  .control-select {
    user-select: none; /* don't select anything */
    user-select: auto; /* let the browser decide */
    user-select: all; /* select everything */
    user-select: text; /* select only text */
    user-select: contain; /* selection contained within element bounds */
  }

When I think about it, there's certainly an argument to be made that you'd prefer some content be selected and copied and others content not, like advertisements or images.

This falls into the family of CSS pointer-events where CSS is used for something other than display.  My first thought is that selection preference should be done via a HTML attribute, like autocomplete and autocorrect are.  Anyways, give the demo a roll!

Recent Features

  • By
    LightFace:  Facebook Lightbox for MooTools

    One of the web components I've always loved has been Facebook's modal dialog.  This "lightbox" isn't like others:  no dark overlay, no obnoxious animating to size, and it doesn't try to do "too much."  With Facebook's dialog in mind, I've created LightFace:  a Facebook lightbox...

  • By
    CSS @supports

    Feature detection via JavaScript is a client side best practice and for all the right reasons, but unfortunately that same functionality hasn't been available within CSS.  What we end up doing is repeating the same properties multiple times with each browser prefix.  Yuck.  Another thing we...

Incredible Demos

  • By
    Record Text Selections Using MooTools or jQuery AJAX

    One technique I'm seeing more and more these days (CNNSI.com, for example) is AJAX recording of selected text. It makes sense -- if you detect users selecting the terms over and over again, you can probably assume your visitors are searching that term on Google...

  • By
    Retrieve Google Analytics Visits and PageViews with PHP

    Google Analytics is an outstanding website analytics tool that gives you way more information about your website than you probably need. Better to get more than you want than not enough, right? Anyways I check my website statistics more often than I should and...

Discussion

  1. MaxArt

    Been using that for a while – obviously, the most common usage is none.
    It’s odd it’s still not been finalized and it’s been used like this for *several years* already, still with vendor prefixes and all.

  2. user-select: contain; seems like it could come in handy and it would be easier to change the values via CSS than everywhere in the markup. Support isn’t too shabby either…

    http://caniuse.com/#search=user-select

    I enjoyed the demos. Thanks for sharing.

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!