Select Entire Elements With Css

You can make the entire contents of any HTML element selectable with 'user-select: all'.

January 17, 2020

On multiple occasions earlier in my career, I can remember writing JavaScript to make it easier for a person to select all of the text inside an element with a single click. (Most often so they can easily copy and paste it, for things like links, IDs, etc.) Now it turns out there's a single CSS style you can add to that element to make this possible: user-select: all. Check it out in the following paragraph.

If you click on this paragraph in certain browsers (Chrome, Firefox, and Opera as of this post), the entire contents should be selected. Kinda crazy, huh? I wonder what crazy uses this could enable …

Browser support seems alright, though its opposite — user-select: none — has much broader support. Hopefully this will see better support across more browsers soon, but the original article I learned this from also has a decent polyfill.

See the inspiration