CSS - Pseudo-element - ::selection

Quiz

The ::selection pseudo-element is used in applying styles to the part of a document or page, that has been highlighted by user intervention, like clicking and dragging the mouse to select the text.

A small list of CSS properties can be used with ::selection pseudo- element, which are as follows:

Color property
background-color
text-decoration and its related properties
text-shadow
webkit-text-stroke-color, -webkit-text-fill-color and -webkit-text-stroke-width

The background-image property is ignored.

Syntax

selector::selection {
    /* ... */
}

Accessibility Concerns:

It is not advised to override the selected text styles for aesthetic reasons.

In case the text style has been overriden, make sure to apply high contrast ratio for the text, as this will be legible for the user.

When the user-entered text is rendered with the same styling as the placeholder text, in Windows High Contrast Mode, makes it difficult to distinguish between the placeholder text and the entered text.

The placeholders are not a replacement for the <label> element. The assistive technologies can not parse the <input> element.

CSS ::selection Example

Here is an example of ::selection pseudo-element:

<html> 
<head>
<style>
   .highlight::selection { 
      color: yellow;
      background: brown;
   } 
</style>
</head>
<body>
   <p class="highlight">Select Me!!! to see the effect.</p>
   <p>No style applied to me.</p>
</body>
</html>

Print Page