Change the Selection Colors in Web Pages

If you haven't noticed, when you select any text from any page of our blog, the text becomes bluish with a violet selection background. Check any other sites and you can know that this is not the same as in other sites or doesn't match your theme. But it is really easy to do. Just matter of adding a small piece of CSS!

I assume you know how to use CSS in web pages. So let's see the code I used.

::selection {
background: #7f4fcf;
color: #aaccff; /* Chrome and Safari */
}
::-moz-selection {
background: #7f4fcf;
color: #aaccff; /* Firefox */
}

As you can see, there are two parts. The first part is for Webkit based browsers like Google Chrome and Apple Safari. The second part is for Mozilla based browsers like Firefox.

The background property specifies the background color of the selection and the color property specifies the text color. As simple as that!