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.

Demo

A demo can be reached from the link below

http://jaspreetchahal.org/examples/css-examples/css-selection.html
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)

default_selection

 

Demo is provided below

 

http://jaspreetchahal.org/examples/css-examples/css-selection-individual.html

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

cheers,

 

 

 

 

Leave a Reply

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