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).
::selection {
background-color: cyan;
}
Allowable properties
Only certain CSS properties can be used with ::selection
:
color
background-color
cursor
caret-color
outline
and its longhandstext-decoration
and its associated propertiestext-emphasis-color
text-shadow
In particular, background-image
is ignored.
Syntax
/* Legacy Firefox syntax (version 61 and below) */ ::-moz-selection ::selection
Examples
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;
}
/* 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
Accessibility concerns
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.)
- WebAIM: Color Contrast Checker
- MDN Understanding WCAG, Guideline 1.4 explanations
- Understanding Success Criterion 1.4.3 | W3C Understanding WCAG 2.0
Specifications
Specification | Status | Comment |
---|---|---|
CSS Pseudo-Elements Level 4The definition of '::selection' in that specification. | Working Draft | Initial definition. |
Note: ::selection
was in drafts of CSS Selectors Level 3, but it was removed in the Candidate Recommendation phase because its was under-specified (especially with nested elements) and interoperability wasn't achieved (based on discussion in the W3C Style mailing list). It returned in Pseudo-Elements Level 4.
Browser compatibility
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Update compatibility data on GitHub
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
::selection
|
Chrome
Full support 1 |
Edge
Full support 12 |
Firefox Full support 62 Full support 62 Full support 1 Prefixed' Implemented with the vendor prefix: -moz- |
IE
Full support 9 |
Opera
Full support 9.5 |
Safari
Full support 1.1 |
WebView Android
Full support 37 |
Chrome Android
Full support 18 |
Firefox Android Full support 62 Full support 62 Full support 4 Prefixed' Implemented with the vendor prefix: -moz- |
Opera Android
Full support 14 |
Safari iOS
Full support 1 |
Samsung Internet Android
Full support 1.0 |
Legend
- Full support
- Full support
- Requires a vendor prefix or different name for use.'
- Requires a vendor prefix or different name for use.
See also
pointer-events
- control which events are active on the element
::selection by Mozilla Contributors is licensed under CC-BY-SA 2.5.