The ::selection selector matches the portion of an element that is selected by a user.

when you select a portion of someone’s site content, you’ll see that the text is displayed as a highlight. By default, most browsers use a very light blue background color with no change to the font color.

The ::selection selector is supported in IE9+, Opera, Google Chrome and Safari.
Firefox supports an alternative, the ::-moz-selection .

Here’s an example of the default browser text selection:



What most people don’t know is that through CSS, you can style the font color and background color. Here’s an example of styled browser text selection:

How to Change the Default Text Selection Color

Now to the good stuff – only a few CSS properties can be applied to ::selection : color, background, cursor, and outline.

So here’s how you would style the text selection in the second example above:

/* Body
------------------------------------------------------------ */

::-moz-selection {
    background-color: #dd2020;
    color: #fff;
}

::selection {
    background-color: #dd2020;
    color: #fff;
}

Please note that because of browser quirks the CSS above will not work if the you try to combine the selectors as such:

/* Body
------------------------------------------------------------ */

::-moz-selection,
::selection {
    background-color: #dd2020;
    color: #fff;
}