W3docs
en
Log in

CSS ::selection Pseudo Element

Use the ::selection CSS pseudo-element for selecting and styling a part of the document. Read about the pseudo-element and try examples.

The ::selection pseudo-element targets the part of a document that the user has highlighted — for example, by clicking and dragging the mouse across text, or pressing Ctrl/Cmd + A. It lets you override the browser's default highlight appearance so selected text matches your brand or improves contrast.

By default the browser draws selected text on an operating-system highlight color (usually a blue background with white text). Styling ::selection replaces that default for the elements you target.

This chapter covers the syntax, which properties are allowed, browser-prefix quirks, and practical examples for text, multiple colors, and form fields.

Why and when to use it

A custom selection style is a small detail that makes a site feel polished:

  • Brand consistency — match the highlight to your accent color instead of the OS blue.
  • Readability — on a dark or low-contrast background, the default highlight can make text hard to read; you can pick a pairing with guaranteed contrast.
  • Scoping — apply different highlight colors to different sections (for example, code blocks vs. body text).

Keep the selected text readable: always set both color and background-color together so you never end up with, say, white text on a near-white highlight.

Which properties are allowed

::selection ignores most CSS. Only a small, fixed set of CSS properties can be used to style it:

Properties such as font-size, font-family, margin, or transform have no effect on selected text — the selection is only a paint-time highlight, not a real box you can move or resize.

Info

Firefox historically used a vendor-prefixed form, ::-moz-selection. To support older Firefox versions, declare the prefixed rule before the standard ::selection rule, as the examples below do.

This pseudo-element was introduced in CSS Selectors Level 3, then removed, and now lives in the CSS Pseudo-Elements Level 4 specification.

Standard and version

CSS Pseudo-Elements Level 4

Syntax

CSS ::selection Pseudo Element

::selection {
  css declarations;
}

Example of the ::selection pseudo-element:

CSS ::selection code example

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

CSS ::selection, another code example

<!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>
Try it Yourself »

Things to keep in mind

  • It does not inherit like normal properties. A ::selection rule applies to the element it targets; it is not a value that cascades to selected children the way color does. To style selection site-wide, write a rule on a broad selector such as ::selection (matches everything) or body ::selection.
  • Background must be opaque-ish to be visible. A background-color with very low alpha may be hard to see over the existing background.
  • Limited to its property list. If a declaration seems to do nothing, check the allowed list above — it is probably being ignored.

To go deeper on the individual properties you can use here, see color, background-color, and text-shadow.

Practice

Practice
What can you achieve using the ::selection pseudo-element in CSS?
What can you achieve using the ::selection pseudo-element in CSS?
Was this page helpful?