The ::selection pseudo element

If you select some text on your website or blog, it will get a default styling from your browser. If you are on Chrome/Windows, this will most likely be a dark blue background and a white text color. Did you know, that you can change this styling via CSS? The magic word is ::selection and as a matter of fact, it is quite well supported across all browsers.

The ::selection pseudo element allows you to style the highlighted text. This is actually quite simple:

1
2
3
4
::selection {
    background-color: #130BB0;
    color: #EFF5F5;
}

Pretty straight forward. Checkout this CodePen and play around to get a feeling how it works. However, only a few css properties are supported on the ::selection pseudo element:

  • color
  • background-color
  • cursor
  • caret-color
  • outline
  • text-decoration
  • text-emphasis-color
  • text-shadow

Just don’t forget about Accessibility and be sure to pick a sufficient contrast ration. So experiment and play around with it. It can add a nice touch to your website.

Resources