CSS ::selection Pseudo Element

❮ Prev Next ❯

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:

color
background-color
text-shadow
cursor
caret-color
outline and its longhands
text-decoration and its associated properties
text-emphasis-color

Watch a video course CSS - The Complete Guide (incl. Flexbox, Grid & Sass)

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>

Try it Yourself »

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>

Try it Yourself »

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

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