How to change the default text selection color using CSS?

Default text selection color
A custom text selection color

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;
}

Author

  • Manoj Kumar

    Hi, My name is Manoj Kumar. I am a full-stack developer with a passion for creating robust and efficient web applications. I have hands-on experience with a diverse set of technologies, including but not limited to HTML, CSS, JavaScript, TypeScript, Angular, Node.js, Express, React, and MongoDB.