Click Once, Select All; Click Again, Select Normally

A bonafide CSS trick from Will Boyd!

1. Force all the content of an element to be selected when clicked with user-select: all;
2. If you click a second time, let the user select just parts of the text as normal.
3. 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 to user-select: text;

CodePen Embed Fallback

Will’s article has a bunch of more useful information and use-cases … Read article “Click Once, Select All; Click Again, Select Normally”

The post Click Once, Select All; Click Again, Select Normally appeared first on CSS-Tricks.