Some sites, like, again, Medium, style their selected text with their own background colors. It’s quite simple to do, and yet can really help set one’s page apart. The trick is to use the ::selected pseudo selector. For example if we wanted to give our selected text the classic ‘highlighter’ yellow look, we could do something like the example bellow.

::selection {
  background-color: yellow;
}

There’s a handful of other properties that we can play with as well, like:

• color
• background-color
• cursor
• caret-color
• outline
• text-decoration and its associated properties
• text-emphasis-color
• text-shadow

This great example by Chris Coyer illustrates this well.

For my personal site, I chose just to style the selection a different shade of blue from the default. It’s subtle enough that most people wouldn’t notice, but I find it soothing to have the highlighted text background colors be consistent across all browsers.

The one caveat to the ::selection pseudo selector is that, on mobile, it’s support is haphazard at best. You’ll notice it most on iOS’ Safari.

Up next

In the next post in this series, we’ll discuss how to combine the useSelect hook with these custom styles to create a share-tooltip that works on desktop and mobile.