ref: 494dcd504bd6ebb68b59e8a04057b0a087570d38 uglyduck.srht.site/_posts/2019-06-04-user-select.md -rw-r--r-- 2.1 KiB
494dcd50 — Bradley Taunt tweaking overall design - still very much a WIP 8 months ago

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!) 👍