Changing highlighted text selection color in Blogger blog – CSS Trick

Changing highlight text selection color in Blogger blogWant to show something different in your Blogger blog just like the running trucks then here you go. Here we will see a simple CSS trick that changes the highlighted text selection color in Blogger blog.

When you highlight several texts you can see the selected highlight color as sky blue and text color as white. This is default for all websites which might be pretty boring and so for wordpress users we made a simple tutorial on this topic.

For live demo: Highlight text in this blog

Now for Blogger let’s see how to change the highlighted text selection color that matches your blog color. By using this CSS code you can change the highlight selection color as well as text color in your Blogger blog.

Changing highlighted text selection color in Blogger

Login to Blogger and choose the blog that you wish to change the highlighted color. Now go to your dashboard >> Template and then click edit HTML.

Now press CTRL + F in the code area and search for this line. ]]></b:skin>

Now paste the following CSS just above this line. ]]></b:skin>

/*** Mozilla based browsers ***/
::-moz-selection {
     background-color: #D13D5D;
     color: #3DD1B1;
}

/*** Works on common browsers ***/
::selection {
     background-color: # D13D5D;
     color: #3DD1B1;
}

Once done click save template and now highlight texts in your blog and see the changes.

In the above code the background-color in the highlight color and color is the text color that changes when highlighting. Use color Picker and grab the color codes to perfectly match your blog color.

Hope this helped you on how to change the highlight text selection color in Blogger blog. Share it and subscribe to our RSS feeds to get more tricks.