#user-select

[homeopathic-garden]

The Selection Keeper

Hello my friends!

How to prevent your rogue visitor from copying your beautiful and wonderful article?

via GIPHY

Using the "user-select" attribute in your text!

Use:

user-select: none;

Try to select now, you're naughty!

Ok, what if you want to make the selection easier for him? If your text really serves to be copied.

You can also use this! Just change the value to "all".

Use:

user-select: all;

Now you can copy all text with just one click.

If you want to leave the default, that is, the common selectable.

Use:

user-select: text;

Result:

Test yourself: .selectMe { user-select: all; } .dontSelectMe { user-select: none; } .selectManual { user-select: text; }

You will not be able to select my fiambre!

I'm kidding, you can select my fiambre.

Normal FIAMBRE!

Protection!

[dangeroussaladmilkshake]

In my quest to contribute to every Mozilla project possible, I spent some time last Friday making updates to Firefox DevTools.  The JSON Viewer component needed some love so that was first on my list.  While viewing the CSS for the JSON Viewer component, I saw something I hadn’t recognized:  CSS user-select:

.heading { -moz-user-select: none; /* don't allow selection */ }

View Demo

After a bit of research, I found that you can control what content can be is selected using CSS:

.dont-select { user-select: none; } .control-select { user-select: none; /* don't select anything */ user-select: auto; /* let the browser decide */ user-select: all; /* select everything */ user-select: text; /* select only text */ user-select: contain; /* selection contained within element bounds */ }

When I think about it, there’s certainly an argument to be made that you’d prefer some content be selected and copied and others content not, like advertisements or images.

View Demo

This falls into the family of CSS pointer-events where CSS is used for something other than display.  My first thought is that selection preference should be done via a HTML attribute, like autocomplete and autocorrect are.  Anyways, give the demo a roll!

[insidehtml5]

In my quest to contribute to every Mozilla project possible, I spent some time last Friday making updates to Firefox DevTools. The JSON Viewer component needed some love so that was first on my list. While viewing the CSS for the JSON Viewer component, I saw something I hadn't recognized: CSS user-select