::selection - CSS Selector

::selection pseudo-element - Description.

The pseudo-element ::selection targets the text, or any element, when it is selected.

Quite a few properties are taken into account when applied to the selector ::selection. Here are the main ones:

• Definition of foreground and background colors: color and background-color.
• Choice of the mouse pointer shape and the text cursor color: cursor and caret-color.
• The properties that define the stripe stroke format: stroke-color , fill-color , and stroke-width .

::selection pseudo-element - Examples of use.

Simple example: changing the colors of the selected text.

This example only plays with foreground and background colors. It should work on all browsers.

No longer show the selection.

It’s easy to give the impression that selection is disabled: just apply a transparent background color to the selector ::selection. But be careful, even though the selection no longer shows on the screen, it is still actually happening. To truly disable the ability to select, refer to the user-select property.

This example also shows that ::selection applies to input areas like textarea. You can check in this area that the selection is correctly made by deleting the text after selection.

Change the look of the selected element or text.

A specific style has been applied to the selection in this paragraph: it is crossed out. Be careful, not all browsers apply these properties to the selector ::selection

Make a text blurry when it's selected.

Making text blurry is possible, but forget about the filter property, it can't be used with ::selection. You just need to apply a shadow to the text and make the text transparent (the shadow won't be affected).

::selection pseudo-element - Browser compatibility.

The pseudo-element ::selection is recognized by current browsers, but the examples above show that not all normally supported properties work, depending on the browser used.

1

::selection
pseudo-element

Estimated overall support.

83%

Browsers on computers :

Mobile browsers :

Outdated or marginal browsers :

Internet Explorer

UC Browser pour Androïd

Opéra Mobile

QQ Browser

Baidu Browser

Samsung Internet

Firefox

Safari

Safari sur IOS

Chrome

Opéra

Edge

Chrome pour Androïd

Firefox pour Androïd

Androïd Brower

KaiOS Browser

Opéra mini

See Caniuse.com for more compatibility information.

Caniuse

::selection pseudo-element - Historic.

• CSS Pseudo-Elements Module Level 4

  Regarding ::selection Introduction of a new pseudo-element selector: ::selection.
  

  January 15, 2015

  Working Draft.

  

  

  

See also...

The pseudo-elements are described in the specification "CSS Pseudo-Elements Module ". There are many of them, but here are the ones that deal with targeting the selected text.

::selection

A pseudo-element that targets user-selected content.

⚠

::search-text

Target the text searched by the internet user (browser search zone CTRL+F).

::target-text

Targets the text of the item designated by the url bookmark.

::highlight()

Pseudo-element that targets the text selected after a search with Javascript.