Gotta Select’em All

Programming - Mar 31, 2024

I suspect it is not highly known that CSS can control how text is selected. You can do user-select: none; to prevent some text from being selected. That’s probably not terribly good UX in general, but perhaps you use some period (.) characters as decoration or something, I could see preventing those from being selected.

The exact opposite is user-select: all; which forces all the text to be selected in an element. Again, probably somewhat iffy UX. Forcing someone to select all the text is fairly rare on the web and to actively prevent someone from selecting a part of it feels like it’s trying too hard to be helpful to the point that it’s actually hurting.

Anyway, here’s Dag Frode Solberg with more detail.

I forked his demo here to show off a simple scenario where click-to-select might make some level of sense:

See the Pen
css/user-select/4
by Chris Coyier (@chriscoyier)
on CodePen.

If you wanted to implement a situation where you click once to highlight all then stop interfering, you could do that in JavaScript with an click handler than removes itself after the first click.

const cells = document.querySelectorAll("td");

function highlight(event) {
  window.getSelection()
    .selectAllChildren(
      event.target
    );
  event.target.removeEventListener("click", highlight);
}

cells.forEach(cell => {
  cell.addEventListener("click", highlight);
});

Direct Link →

Previous Next
Copyrights
We respect the property rights of others, and are always careful not to infringe on their rights, so authors and publishing houses have the right to demand that an article or book download link be removed from the site. If you find an article or book of yours and do not agree to the posting of a download link, or you have a suggestion or complaint, write to us through the Contact Us .
Read More