Home > Designing, Others > Click Once, Select All; Click Again, Select Normally

Click Once, Select All; Click Again, Select Normally

April 29th, 2020 Leave a comment Go to comments

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 for user-select.

Direct Link to Article — Permalink

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

Categories: Designing, Others Tags:
  1. No comments yet.
  1. No trackbacks yet.
You must be logged in to post a comment.