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) 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 [crayon-64834d76b2c75743288492/] 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) Now that was with changing text color globally lets do the same thing with individual paragraphs say you have a markup as shown below . [crayon-64834d76b2c7a817102610/] [crayon-64834d76b2c7d498770861/] 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 [crayon-64834d76b2c7e240742920/] The result will be this (chrome) 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, … [Read more...]
Recent Comments