How to change cursor highlight color in Blogger and WordPress Guide for Beginners

Last Update: March 2026

Find out how to change cursor highlight color on your website, you can easily do it using CSS. 

The cursor highlight color is also known as the text selection color, which appears when visitors drag their cursor across text.

To change the cursor highlight color on a website, you can use the CSS ::selection selector to define a custom background color and text color for highlighted text. By adding a small CSS snippet to your Blogger or WordPress theme, you can replace the default blue highlight with a color that matches your website design.

---

Quick Steps to Change Cursor Highlight Color

1. Add the CSS ::selection selector.
2. Define the highlight background color.
3. Set the text color for selected text.
4. Add the CSS code to your Blogger or WordPress theme.
5. Save and test the highlight effect on your website.

---

What Is Cursor Highlight Color?

The cursor highlight color is the background color that appears when users select or drag their cursor across text on a webpage. In CSS, this effect is controlled using the ::selection selector, which allows website owners to customize the color of highlighted text.

Most browsers highlight selected text in blue by default. 

However, you can customize the highlight color so it matches the design and branding of your website.

Changing the text selection color is mainly done for aesthetic purposes, so it complements the overall color scheme of your blog.

For example, on my site, when you drag your cursor across the text, the highlighted background turns orange and the text becomes white.

In this tutorial, you will learn how to change the cursor highlight color or text highlight color using CSS for both Blogger and WordPress websites.

---

CSS code to change cursor highlight color

The following CSS snippet changes the background and text color when visitors highlight text on your website.

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

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

Note:

• color: #fff; sets the highlighted text color to white.
• background-color: #ff5606; sets the highlight background color.

You can replace the color code with any color that fits your website design.

---

How to change text highlight color in Blogger

Follow these steps to change the text selection color in your Blogger (Blogspot) website.

1. Log in to your Blogger dashboard.
2. Click Theme from the left menu.
3. Under Live on Blog, click the Customize button.
4. Select Advanced from the left panel.
5. Scroll down until you see Add CSS.
6. Click Add CSS.
7. Paste the CSS code below into the CSS field.

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

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

1. Change the background color code to your preferred color.
2. Make sure the text selection color contrasts well with your website background so it remains readable.
3. Click the Apply to Blog button at the top right corner.

That's all you need to do. Your Blogger text highlight color is now customized.

---

How to change text selection color in WordPress

You can also customize the text highlight color in WordPress using the same CSS code.

1. Sign in to your WordPress Dashboard.
2. Click Appearance on the left menu.
3. Select Customize.
4. Scroll down the menu panel.
5. Click Additional CSS.
6. Paste the CSS code below into the empty field.

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

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

1. Change the color code to match your website design.
2. Highlight text in the preview screen to test the effect.
3. Make sure the selected text remains visible and readable.
4. If you are satisfied with the result, click the Publish button.

You have successfully changed the text selection highlight color on your website.

---

Topics: Blogger, WordPress, browser, text selection color, CSS

---