CSS - Pseudo-element - ::selection

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:

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>
Advertisements