Will Boyd digs into the user-select CSS property:
CSS lets you control how text selection behaves and appears on your pages. This can help you improve usability in certain situations and add a little bit of visual flair. Let’s dive in!
His posts includes a very nice hack to make user-select: all; work only at first click.
code {
-webkit-user-select: all;
user-select: all;
}
code:focus {
animation: select 100ms step-end forwards;
}
@keyframes select {
to {
-webkit-user-select: text;
user-select: text;
}
}🐛 As noted in the comments by Kel: this animation-hack doesn’t work in Safari.
I’ve extended his example to re-enable user-select: all; whenever the snippet is blurred, so that upon a next selection it will restart with selecting all again. Feels more natural.
See the Pen Select All… Then Select Some by Bramus (@bramus) on CodePen.
🤔 This looks like something that should be added to the CSS Spec. It would require a new value for user-select, as user-select: all; explicitly says that all must be selected:
If a selection would contain part of the element, then the selection must contain the entire element including all its descendants.
::sad-trombone:: for Safari users. Doesn’t appear to work in v 13.1 under macOS 10.15.4
Rats! I wanted to paste this into my previous comment.
https://caniuse.com/#feat=mdn-css_properties_user-select_all
Good Catch! What I’m seeing is that user-select: all; works in Safari (same versions) but the animation-hack doesn’t. Do you see the same?
I’ll update the post to include a note on this, thanks!