How to change the default text selection color using CSS?

The default text selection color for most of the browsers is blue. However, you can very easily change this default text selection color and put any custom color that you want.

To change the default text selection color of an element, we use the ::selection pseudo-element which allows us to change the color, background-color, text-shadow etc. for the selected text.

In the following example, we have changed the text selection color to yellow for the div element.

Example:

div::selection{
    color: black;
    background: yellow;
}

Change the text selection color for the whole page

In the previous example, we saw how we can change the selection color for a particular element.

If you want to change the text selection color for the whole page, you can do it simply by applying styles to the ::selection pseudo-element. Use browser prefixes if you want to apply the changes to all the browsers.

Here is a working example:

Example:

::-moz-selection { /* For Firefox */
  color: black;
  background: yellow;
}

::selection {
  color: black;
  background: yellow;
}