Using user-select

Jun 3, 2019

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 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 */ {
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;

/* Select all text when user clicks */ {
    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!) 👍

← Back to all articles

If you would like help support this blog, please consider donating to help keep articles ad-free.
This site is an honorary member of the 1MB Club.
No third-party advertising or data collection - More about privacy.
Built with Jekyll & hosted on Netlify.
Maintained with ♥ for the web.

This page is valid HTML