Custom text selection

OSCC · CSS, Visual · Dec 30, 2020

Changes the styling of text selection.

• Use the ::selection pseudo-selector to style text within it when selected.

Preview

Select some of this text.

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

::selection {
  background: aquamarine;
  color: black;
}

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

Recommended snippets

• Custom checkbox

  CSS, Visual

  Creates a styled checkbox with animation on state change.

• Custom scrollbar

  CSS, Visual

  Customizes the scrollbar style for elements with scrollable overflow.

• Stylized quotation marks

  CSS, Visual

  Customizes the style of inline quotation marks.