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
    From Webcam to Animated GIF: the Secret Behind chat.meatspac.es!

    My team mate Edna Piranha is not only an awesome hacker; she's also a fantastic philosopher! Communication and online interactions is a subject that has kept her mind busy for a long time, and it has also resulted in a bunch of interesting experimental projects...

  • By
    JavaScript Promise API

    While synchronous code is easier to follow and debug, async is generally better for performance and flexibility. Why "hold up the show" when you can trigger numerous requests at once and then handle them when each is ready?  Promises are becoming a big part of the JavaScript world...

Incredible Demos

  • By
    Create Custom Events in MooTools 1.2

    Javascript has a number of native events like "mouseover," "mouseout", "click", and so on. What if you want to create your own events though? Creating events using MooTools is as easy as it gets. The MooTools JavaScript What's great about creating custom events in MooTools is...

  • By
    HTML5 Context Menus

    One of the hidden gems within the HTML5 spec is context menus. The HTML5 context menu spec allows developers to create custom context menus for given blocks within simple menu and menuitem elements. The menu information lives right within the page so...

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!