Change the text selection color using CSS

In this tutorial, we are going to learn how to change the text selection color and background color in css.

::selection Selector

In css, we have the ::selection pseudo-element selector by using that we can change the default text selection color.

Here is an example:

/* Make selected text green on a black background   */
::selection{
    color: green;
    background: black;
}

::-moz-selection {
    color: green;
    background: black;  /* firefox code */
}

If you want to change the selection color for a particular element instead of a whole web page, you can do it like this.

p::selection{
    color: pink;
    background: white;
}

p::-moz-selection {
    color: pink;
    background: white;  /* firefox code */
}