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
    6 Things You Didn’t Know About Firefox OS

    Firefox OS is all over the tech news and for good reason:  Mozilla's finally given web developers the platform that they need to create apps the way they've been creating them for years -- with CSS, HTML, and JavaScript.  Firefox OS has been rapidly improving...

  • By
    CSS Filters

    CSS filter support recently landed within WebKit nightlies. CSS filters provide a method for modifying the rendering of a basic DOM element, image, or video. CSS filters allow for blurring, warping, and modifying the color intensity of elements. Let's have...

Incredible Demos

  • By
    Create a Brilliant Sprited, CSS-Powered Firefox Animation

    Mozilla recently formally announced Firefox OS and its partners at Mobile World Congress and I couldn't be more excited.  Firefox OS is going to change the lives of people in developing countries, hopefully making a name for itself in the US as well.  The...

  • By
    MooTools PulseFade Plugin

    I was recently driven to create a MooTools plugin that would take an element and fade it to a min from a max for a given number of times. Here's the result of my Moo-foolery. The MooTools JavaScript Options of the class include: min: (defaults to .5) the...

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!