::selection

Limited availability

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

The::selectionCSS 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).

The::selection pseudo-element follows a special inheritance model common to all highlight pseudo-elements. For more details on how this inheritance works, see theHighlight pseudo-elements inheritance section.

Try it

p::selection {  color: red;  background-color: yellow;}

<p>  Select a fragment of this paragraph, to see how its appearance is affected.</p>

Allowable properties

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

color
background-color
text-decoration and its associated properties
text-shadow
-webkit-text-stroke-color,-webkit-text-fill-color and-webkit-text-stroke-width

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 thecontrast 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 currentWeb Content Accessibility Guidelines (WCAG), text content must have a contrast ratio of4.5:1, or 3:1 for larger text such as headings. (WCAG defines large text as between18.66px and24px andbold, or24px or larger.)

Examples

HTML

html

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

CSS

::-moz-selection {  color: gold;  background-color: red;}p::-moz-selection {  color: white;  background-color: blue;}

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;}