::selection

::selection lets you style the portion of text a user is currently highlighting with their cursor (or has selected via keyboard, e.g. Ctrl/Cmd+A). Browsers apply a default selection color — usually a shade of blue — but you can override it to match your site's branding.

Basic usage

CSS

::selection {
  background-color: #2563eb;
  color: white;
}

Applied to the universal selector like this, every bit of selectable text on the page picks up the new highlight color when a user drags to select it.

Scoping it to part of the page

CSS

/* Only override selection color inside article content,
   leaving code blocks or other areas with the default */
.article ::selection {
  background-color: #fde68a;
  color: #1f2937;
}

Only a small set of properties actually work

::selection honors a very limited list of properties: `color`, `background-color`, `text-decoration` (and its related `text-decoration-color`/`text-shadow` in supporting browsers), plus `-webkit-text-fill-color`/`-webkit-text-stroke-color` for WebKit/Blink. Properties you might expect to work — `font-weight`, `padding`, `border`, `border-radius`, `text-transform`, and most layout-related properties — are simply ignored on ::selection. Don't spend time trying to add padding or rounded corners to a text selection; the specification does not allow it.

Worked example: branded selection color

CSS

:root {
  --brand-color: #7c3aed;
}

::selection {
  background-color: var(--brand-color);
  color: white;
}

/* Give code samples a slightly different, high-contrast
   selection color so selected code stays legible */
pre ::selection,
code ::selection {
  background-color: #fbbf24;
  color: #1f2937;
}

A subtle, on-brand selection color is a small but noticeable polish detail — especially on marketing and documentation pages where users often copy text.
Make sure the chosen color/background-color pair still has enough contrast to remain readable while selected.
Because so few properties apply, resist the urge to add elaborate styling here — stick to color and text-decoration adjustments.