30-seconds-of-code/snippets/custom-text-selection.md

Custom text selection

Changes the styling of text selection.

HTML

<p class="custom-text-selection">Select some of this text.</p>

CSS

.custom-text-selection::selection {
  background: red;
  color: white;
}

Demo

Select some of this text.

<style> .snippet-demo__custom-text-selection::selection, .snippet-demo__custom-text-selection::-moz-selection { background: red; color: white; } </style>

Explanation

::selection defines a pseudo selector on an element to style text within it when selected.

Browser support

⚠️ Requires prefixes for full support.

• https://caniuse.com/#feat=css-selection