A bonafide CSS trick from Will Boyd!
- Force all the content of an element to be selected when clicked with
- 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
@keyframesanimation when the element is in
:focusto change it to
Will’s article has a bunch of more useful information and use-cases for
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.