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

• MDN Docs
• User Select interoperability

Browser Support

This is specifically for -*-user-select: none;