How To Change Cursor Highlight Color

When you drag your cursor over the text of any website or blog, you can see the blue background color and the text in white.

This cursor-highlight-color is actually termed as Text Selection Color.

Most of time, many of you might not realize the difference in color when you highlight or drag your cursor over the text of a site.

It is because most of the sites do not customize or modify this rather small insignificant element.

By default, all the browsers use the different shade of blue.

If you don't want your site visitors to see the same blue color highlight color for your site, you can change it yourself.

The only reason to change this text selection color is more for aesthetic reason.

You just want to complement the color of your website or blog.

For instance, for my site here, if you drag your cursor over the text, you will see the text in white and background in orange color.

How To Change Cursor Highlight Color 

Let me show you how to change the text highlight color or text selection color for your site with CSS for both Blogger and WordPress sites.

For Blogger/Blogspot site

1. Log into your Blogger account.

2. Click on "Theme".

3. Under "Live on Blog", click on "Customize" button.

4. You click on "Advanced" located on the left side of the page.

5. Pull the slider down until you see "Add CSS."

6. Click on "Add CSS".

7. Paste the code below inside the space on the right side of the page.

::-moz-selection {
background-color: #DE0000;
color: #fff;
}

::selection {
background-color: #DE0000;
color: #fff;
}

Note: The "color: #fff" is white for the text.

For the background color, you need to change the color of your choice.

You can get your HTML color codes from here.

Make sure the text selection color is visible with the background color on your website.

8. After you have set your color code, click "Apply to Blog" button at the top right hand corner of the page.

9. That's all you need to do.

For WordPress Site

1. Sign into your WordPress Dashboard.

2. Click on "Appearance" located at admin-panel on the left side of the page.

3. Then click "Customize".

4. Next you scroll down the menu on the left side of the page.

5. You will see "Additional CSS" and you click on it.

6. Paste the quote below into the empty space provided.

 ::-moz-selection {
background-color: #DE0000;
color: #fff;
}

::selection {
background-color: #DE0000;
color: #fff;
}

Note: You need to change the color to your preference.

7. To get the HTML color code, refer to the link, as provided above.

8. After the code is placed, you can highlight the text to see it.

9. Make sure the text selection color is visible with the background color on your website.

10. If you are satisfy with the outcome, click on "Publish" button above.

11. You're done.