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
    Create Namespaced Classes with MooTools

    MooTools has always gotten a bit of grief for not inherently using and standardizing namespaced-based JavaScript classes like the Dojo Toolkit does.  Many developers create their classes as globals which is generally frowned up.  I mostly disagree with that stance, but each to their own.  In any event...

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

Incredible Demos

  • By
    Add Styles to Console Statements

    I was recently checking out Google Plus because they implement some awesome effects.  I opened the console and same the following message: WARNING! Using this console may allow attackers to impersonate you and steal your information using an attack called Self-XSS. Do not enter or paste code that you...

  • By
    Create Spinning, Fading Icons with CSS3 and MooTools

    A goal of my latest blog redesign was to practice what I preached a bit more;  add a bit more subtle flair.  One of the ways I accomplished that was by using CSS3 animations to change the display of my profile icons (RSS, GitHub, etc.)  I...

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!