How to Change Text Selection Color with CSS

Whenever a user selects a website text to highlight, it automatically shows some background and text color.

The default color is blue for background and white for text.

If you have not noticed it before just select the text and you will get it.

So, In this tutorial, I am going to show you how you can override the default text selection color with CSS.

Change Text Selection Color Using CSS

The ::selection pseudo-element is one of the awesome features of CSS3. 

Here we will use the ::selection selector to override the default text selection color.

::selection {
background: #0ab50a;
color: #fff;
}

::-moz-selection {   /* For Mozilla */
background: #0ab50a;
color: #fff;
}

Live Demo

Hope you have understood how to change text selection color using css. If you have any query feel free to comment.

Leave a Comment