Skip to main content
CSS is fun and cool and I like it.
Article

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;
Read article “Click Once, Select All; Click Again, Select Normally”
Link

Gotta Select’em All

Article

Force Selection of Text Block

Have you ever seen (or put yourself) some text into a <textarea></textarea> or <input />, not because it was part of a form, but because it made the whole block of text easier to select. Inputs like that have selection boundaries, meaning you can click into them and (for example) Select All and get just the text inside the input.

There is a CSS property that allows us to do that without needing to use a not-particularly-semantically-appropriate form … Read article “Force Selection of Text Block”