::selection

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

The ::selection CSS pseudo-element applies styles to the part of a document that has been highlighted by the user (such as clicking and dragging the mouse across text).

Try it

Allowable properties

Only certain CSS properties can be used with ::selection:

In particular, background-image is ignored.

Syntax

css
::selection {
  /* ... */
}

Accessibility

Don't override selected text styles for purely aesthetic reasons — users can customize them to suit their needs. For people experiencing cognitive concerns or who are less technologically literate, unexpected changes to selection styles may hurt their understanding of the functionality.

If overridden, it is important to ensure that the contrast ratio between the text and background colors of the selection is high enough that people experiencing low vision conditions can read it.

Color contrast ratio is found by comparing the luminosity of the selected text and the selected text background colors. To meet current Web Content Accessibility Guidelines (WCAG), text content must have a contrast ratio of 4.5:1, or 3:1 for larger text such as headings. (WCAG defines large text as between 18.66px and 24px and bold, or 24px or larger.)

Examples

HTML

html
This text has special styles when you highlight it.
<p>Also try selecting text in this paragraph.</p>

CSS

css
/* Make selected text gold on a red background */
::selection {
  color: gold;
  background-color: red;
}

/* Make selected text in a paragraph white on a blue background */
p::selection {
  color: white;
  background-color: blue;
}

Result

Specifications

Specification
CSS Pseudo-Elements Module Level 4
# selectordef-selection

Browser compatibility

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
::selection
Supports the text-decoration property

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
See implementation notes.
Requires a vendor prefix or different name for use.
Has more compatibility info.

See also