Do you ever drag your cursor over texts on some websites and wonder how they managed to achieve such a cool background color? The background color matches the website’s branding.

This cursor-highlight color is called text selection color.

In most cases, you might not notice the difference in color when you highlight or drag your cursor over the text of a website.

By default, most web browsers use different shades of blue as the text selection color.

If you don’t want your website visitors to see the same blue color when they highlight or drag the cursor over the text of your website, you can change it yourself.

The main reason why you may want to change this text selection color is just to complement the color of your website.

For instance, for this website, if you drag your cursor over the text, you will see the text in white color and the background in a color that matches the branding of this website.

How To Change Cursor Highlight Color in Divi

Let me show you how to change the text highlight color or text selection color for your Divi website with CSS.

• Sign into your WordPress Dashboard.
• Go to Divi > Theme Options > Custom CSS and paste the CSS Code below.
• Click on Save Changes.

/*change color of text highlight*/
::-moz-selection {
color: #ffffff;
background: #0ECAD4;
}

::selection {
color: #ffffff;
background: #0ECAD4;
}

Pro Tip: How to Add CSS Code Snippets to the Divi Theme

Note:

• The “color: #ffffff” is white for the text.
• For the background color, you need to change the color of your choice. Or something that matches your branding.
• Make sure the text selection color is visible with the background color on your website.

Well, that’s it!