Limited supportLimited browser support. Check compatibility before use.
Selectors Limited support

::selection

The ::selection CSS pseudo-element selects text a user has highlighted.

Selectors

Overview

The ::selection CSS pseudo-element selects text a user has highlighted.

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
:selection
1
12
62
1.1
18
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: -moz- (1)

Syntax

CSS 
::selection {
  background-color: #3498db;
  color: white;
}
p::selection {
  background-color: #e74c3c;
}

Live demo

customselectioncolor

CSS customselectioncolor demo.

PreviewFullscreen

redselectioncolor

CSS redselectioncolor demo.

PreviewFullscreen

Brand color

CSS Brandcol- demo.

PreviewFullscreen

Use cases

  • Using ::selection

    The ::selection CSS pseudo-element selects text a user has highlighted.

Cautions

  • Limited browser support. Check compatibility before use.

Accessibility

  • Make sure visual changes are conveyed appropriately to assistive technology.

Related links

Powered by web-features