tdarb.org > Using User-Select

// 373 words // 1 minute read

Using User-Select

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:

See the Pen CSS: User Select Property by Bradley Taunt (@bradleytaunt) on CodePen.

Browser Support

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


Leave a comment

To make a comment, please send an e-mail using the button below. Your e-mail address won't be shared and will be deleted from my records after the comment is published. If you don't want your real name to be credited alongside your comment, please specify the name you would like to use. If you would like your name to link to a specific URL, please share that as well. Thank you.

Comment via email