30 seconds of CSS

  Back to Home

Custom text selection  visual

Changes the styling of text selection.

HTML
<p class="custom-text-selection">Select some of this text.</p>
CSS
::selection {
  background: aquamarine;
  color: black;
}
.custom-text-selection::selection {
  background: deeppink;
  color: white;
}
Demo

Select some of this text.

Explanation
  • ::selection defines a pseudo selector on an element to style text within it when selected. Note that if you don't combine any other selector your style will be applied at document root level, to any selectable element.
Browser support

90.1%

⚠️ Requires prefixes for full support and is not actually in any specification.