Force Selection of Text Block

Have you ever seen (or put yourself) some text into a <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 input.

Styling selected text

Although… I might recommend not pairing these, as the auto-selecting text behavior is already a little weird, so that combined with a totally different selection style might be confusing to the point of a person not understanding what is happening.

Or at least, making the ::selection site-wide, not specific to isolated areas.

The Classic JavaScript Way

No Edge support might be a deal-breaker for you. If it’s mission-critical to auto-select text, you might wanna just stick with an input and JavaScript.

I’m sure you could get a lot fancier, like by avoiding inline event handling, and considering the “OK, I’ve clicked into you and you selected your text, I get it, now stop doing that so I can only select a part of you” – which is certainly possible.

Pseudos

For better or worse, user-select: text; might be a way to make pseudo elements (like ::before or ::after) selectable, which they currently are not in any browser. It’s probably good that you can’t select them, as pseudo elements also aren’t supposed to be read in AT (because they aren’t “content”). But it is kinda strange to see text on a screen you can’t select, so I wouldn’t be surprised whichever way browsers land on this.

Mobile

For iOS, there is yet-another thing you may want to use:

.prevent-touch-callout {
-webkit-touch-callout: none;
}

Not specifically about selection, but if you’re preventing selection of text you’re likely preventing interaction in general. MDN:

When a target is touched and held on iPhone OS, Safari displays a callout information about the link. This property allows disabling that behavior.

Forcing a copy?

Since we’re talking about forcing selection of text, can we force a copy-to-clipboard as well? You can, actually. There used to be a Flash-based way to do it, but, as I think we all know, Flash is pretty dead. Chrome just announced another deathblow. IE 10 supported this execCommand thing, and as it happens, that seems like the thing that browsers are going with. Snagged this demo from that Google article by Matt Gaunt: