CSS3 change text selection color

Hi Guys,

There are times when you would like to override default browser text selection color. What I mean can only be shown with example.

Try selecting the paragraph above.

You will see something like this (chrome)

Default browser selection color

Now say you would like to change that selection color to grey or red or any other color of your choice then how to do it

Lets check it out

Global selection color change

You can add these styles to your page or to your Stylesheet file for page/site wide selection color change

This will have a page wide effect.


A demo can be reached from the link below

The result will be similar to the one shown below (chrome)

changed default selection color css


Now that was with changing text color globally lets do the same thing with individual paragraphs

say you have a markup as shown below



change selection color for individual elements on page

Now to change selection color of above two containers I’ll have these style in my spreadsheet or on my page


The result will be this (chrome)



Demo is provided below



Browser support

All major browsers in the latest versions support this behavior


I hope that this help.

If you have any questions regarding this post or would like to mend anything please leave your comments






Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.