How To Change Colors of Selected/Highlighted Texts

Posted by Lasantha Bandara on October 23rd, 2015 File Under : css2 Comments

This quick tutorial explains how to change colors of selected/highlighted texts and backgrounds. This can be done adding few line of CSS codes into your website. It has good browser support and works on all modern web browsers. Follow the steps given below to change text selection colors.

1.Login to your blogger account and go "Edit HTML".

2.Scroll down to where you see </head> tag .

3.Copy below code and paste it just before the </head> tag .

<style type="text/css">
::selection {background:#cc0000;color:#ffffff;}
::-moz-selection{background:#cc0000;color:#ffffff;}
code::selection {background: #333333;color:#ffffff;}
code::-moz-selection {background: #333333;color:#ffffff;}
pre::selection {background: #44ceff;color:#ffffff;}
pre::-moz-selection {background: #44ceff;color:#ffffff;}
</style>

Note : You can change colors as you like.

4.Save your template and refresh your website/blog.

Final result will look like this:

Change Colors of Selected/Highlighted Texts

If you are using WordPress, add above code into your style.css file.

File Under : css

Related Posts

2 Responses to “How To Change Colors of Selected/Highlighted Texts”

  1. mopheat says:

    Unfortunately only be run on internet explorer, btw thank's for your information...

  2. Richard says:

    @mopheat
    not true, works in webkit browsers, also in firefox. you need to use prefix -moz.

Leave a Reply