Using User-Select

2019-06-04

Highlighting text in order to copy, cut or paste content is a staple action across the web. Now, what if I told you the ability to control what a user can select is configurable with a single CSS property?

Introducing the CSS property

Simply put, the user-select property is defined as follows:

user-select controls whether the user can select text (cursor or otherwise)

The CSS

The property’s available attributes are very straightforward (just remember to target specific browsers for full support!)

/* Default */
p.default {
    user-select: auto;
    -moz-user-select: auto;
    -webkit-user-select: auto;
}

/* Disable the user from selecting text */
p.no-select {
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
}

/* Select all text when user clicks */
p.select-all {
    user-select: all;
    -moz-user-select: all;
    -webkit-user-select: all;
}

Let’s see it in action

Try selecting the separate paragraph elements in the CodePen below:

Live CodePen Example

Browser Support

The great news is user-select is fully supported across all modern browsers (even as far back as IE10!)