CSS Click Chart

Selection Pseudo-Element

Using a pseudo-element, allows you to change the text color or background color on selected text.

Specification

Selecting Highlighted Content on W3C

Example Code

::selection {
  background: purple;
  color: hotpink;
}

::-moz-selection {
  background: purple;
  color: hotpink;
}

Live Demonstration

Select the text in this paragraph. The background color and text color will change to purple and hotpink for the selected area.

Browser Support

Can I Use css-selection? Data on support for the selection-color feature across the major browsers from caniuse.com.

Tools / Polyfills

Tutorials / Articles