A bonafide CSS trick from Will Boyd!
- Force all the content of an element to be selected when clicked with
user-select: all;
- If you click a second time, let the user select just parts of the text as normal.
- Second click? Well, it’s a trick. You’re really using a time-delayed
forwards
-ending@keyframes
animation when the element is in:focus
to change it touser-select: text;
Will’s article has a bunch of more useful information and use-cases for user-select
.
Hmm, this doesn’t seem to work very well on mobile. Would love to know if it can be made to have an effect similar to desktop.
I hate things that modify the expected behavior.
If I need to select only part of that code, I will have to click 3 times.
Maybe something better could be “double click to select all” or something like this.
The original article also explains the use of
user-select: none;
that obviously will be abused.