X

Headline

This is an important message requiring you to make a choice if you're based in the EU.

CSS ::selection Pseudo Element

The ::selection pseudo-element is a highlighted part of the document. It is used to apply styles to the part of a document that has been highlighted by the user (such as clicking and dragging the mouse across text).

The default text selection background color is blue, and this property is used to change the default color.

Only a few CSS properties can be used to style the ::selection pseudo-element:

The -moz- prefix is used with this selector in the form: ::-moz-selection.

This pseudo-element was introduced in the CSS Selectors Level 3 but was removed and, currently, it is in Pseudo-Elements Level 4.

Version

CSS Pseudo-Elements Level 4

Syntax

::selection {
css declarations;
}

Example of the ::selection pseudo-element:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      ::-moz-selection { 
      color: #eee;
      background: #8ebf42;
      }
      ::selection {
      color: #eee;
      background: #8ebf42;
      }
    </style>
  </head>
  <body>
    <h2>::selection selector example</h2>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
  </body>
</html>

Select the text to see the colors:

Example of the ::selection pseudo-element with different colors:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .green::-moz-selection{
      background-color: #8ebf42;
      }
      .green::selection{
      background-color: #8ebf42;
      }
      .yellow::-moz-selection{
      background-color: #FFFF19;
      }
      .yellow::selection{
      background-color: #FFFF19;
      }
    </style>
  </head>
  <body>
    <h2>::selection selector example</h2>
    <p>This is a text with the default selection background-color.</p>
    <p class="green">Select this text to see a green background.</p>
    <p class="yellow">Select this text to see a yellow background.</p>
  </body>
</html>

Example of the ::selection pseudo-element with <textarea> and <input>:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      input::-moz-selection{
      color: #1c87c9;
      background-color: #eee;
      }
      input::selection{
      color: #1c87c9;
      background-color: #eee;
      }
      textarea::-moz-selection{
      color: white;
      background-color: #8ebf42;
      }
      textarea::selection{
      color: white;
      background-color: #8ebf42;
      }
    </style>
  </head>
  <body>
    <h2>::selection selector example</h2>
    <p>Input element</p>
    <form>
      <input type="text" value="Select this input text" />
      <p>Textarea element</p>
      <textarea rows="5" cols="25">Select this textarea text</textarea>
    </form>
  </body>
</html>

Browser support

4.0+ 12.0+ 62.0+2.0-61.0
-moz-
3.1+ 10.0+

Practice Your Knowledge

The following CSS properties can be used to style the ::selection pseudo-element



Do you find this helpful?

Related articles