CSS: How To Change Default Text Selection Color on your Blog

Now you can change your blog’s default text highlight color with cute colors of your choice by adding this cool CSS3 declaration —  ::selection — to your stylesheet.   Here’s how to use it:

::selection {
	background: #ffb7b7; /* Safari */
	}
::-moz-selection {
	background: #ffb7b7; /* Firefox */
}

If you want to change the color of the selected text, just add color: like this…

::selection {
	background: #ffb7b7; /* Safari */
        color: #ffffff;
	}
::-moz-selection {
	background: #ffb7b7; /* Firefox */
        color: #ffffff;
	}

It’s something that most visitors would never see, but it’s a fantastic visual touch for those who would.  This trick works on all major browsers except IE.  As always, IE is left behind.

How To Change Text Selection or Highlight Color in Blogger

Edit your blog’s template and paste the code in the template’s CSS:
1. Go to your Blogger dashboard > Design > Edit HTML
2. In the template HTML, find the CSS for the body element.
   It looks something like this: (it starts with body { )

   body {
     background:$bgcolor;
     margin:0;
     color:$textcolor;
     font:x-small Georgia Serif;
     text-align: center;
     }

3. Paste the code just before the body {,
   so that it would look something like this:

   ::selection {
      background: #ffb7b7; /* Safari */
           color: #ffffff;
      }
   ::-moz-selection {
      background: #ffb7b7; /* Firefox */
           color: #ffffff;
      }
   
   body {
     background:$bgcolor;
     margin:0;
     color:$textcolor;
     font:x-small Georgia Serif;
     text-align: center;
     }

That’s it.

If you need help in adding the code to your Blogger or WordPress blog, just leave a comment below.

(src: thanks to css-tricks)