Nasi wolontariusze nie przetłumaczyli jeszcze tego artykułu na język Polski. Dołącz do nas i pomóż go przetłumaczyć!
Można także przeczytać artykuł w języku: English (US).

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

Allowable properties

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

In particular, background-image is ignored.

Syntax

/* Legacy Firefox syntax (version 61 and below) */
::-moz-selection

::selection

Example

HTML

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

CSS

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

/* Make selected text in a paragraph white on a blue background */
p::selection {
  color: white;
  background: 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.)

Specifications

Specification Status Comment
CSS Pseudo-Elements Level 4
The 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

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidiOS SafariSamsung Internet
Basic support
Experimental
Chrome Full support 1Edge Full support YesFirefox Full support 62
Full support 62
Full support 1
Prefixed
Prefixed Requires the vendor prefix: -moz-
IE Full support 9Opera Full support 9.5Safari Full support 1.1WebView Android ? Chrome Android ? Edge Mobile Full support YesFirefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?

Legend

Full support  
Full support
Compatibility unknown  
Compatibility unknown
Experimental. Expect behavior to change in the future.
Experimental. Expect behavior to change in the future.
Requires a vendor prefix or different name for use.
Requires a vendor prefix or different name for use.