Divi Page Builder

The Ultimate Web Design Toolkit!

Claim the discount before it disappears!

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

css text selection1 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;
      }
  4. 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)

Divi Visual Page Builder

The Ultimate WordPress Toolkit. Complete Access!

For a short time only, we are offering you 10% off your membership.
Claim the discount before it disappears!

10 thoughts on “CSS: How To Change Default Text Selection Color on your Blog”

  1. I managed to change my default text selection color. However, once texts skip a line, (for a new paragraph for example) it goes back to it’s original (blue) color. How do I solve this? It contradicts with the color of my text selection color so it becomes ugly.

    1. hey! i found the solution for that!!

      all you have to do is:

      include ALL your text between and
      those “p” tags indicates the beggining and the end
      of each paragraphs.

      so let’s say,

      in your HTML document your paragraphs look like this:

      big brown fox stepped outside it’s den
      blah blah blah this is a paragraph
      that i put inside my HTML document

      hello i am a paragraph
      hello i am a paragraph
      hello i am a paragraph

      hello i am a paragraph
      hello i am a paragraph
      hello i am a paragraph

      As you can see, each paragraphs are not in between and .
      if you don’t include them inside those “html tags” then the problem occurs. you will see the default text selection combined with you preffered text selection background..

      hope this helps! again, just include your sentences between and . got it?

      1. include them between <p> </p>
        those got digested as html tags when i posted them.
        sorry if it became confusing

Comments are closed.

Scroll to Top
Copy link