Deprecated: Creation of dynamic property ET_Builder_Module_Comments::$et_pb_unique_comments_module_class is deprecated in /home/292293.cloudwaysapps.com/ejxumdpjev/public_html/wp-content/themes/Divi/includes/builder/class-et-builder-element.php on line 1403



Subscribe On YouTube

Join other subscribers and enjoy other Divi video tutorials!

How To Change The Cursor Text Select Highlight Color In Divi

Here is an easy and fun way to change the background color of the cursor text highlight. This works in Divi or WordPress, and is great for branding!

Deprecated: Use of "parent" in callables is deprecated in /home/292293.cloudwaysapps.com/ejxumdpjev/public_html/wp-content/plugins/divi-module-code-snippet/divi-shim/class_DBCS_Builder_Module_3_1.php on line 165

Deprecated: Use of "parent" in callables is deprecated in /home/292293.cloudwaysapps.com/ejxumdpjev/public_html/wp-content/plugins/divi-module-code-snippet/divi-shim/class_DBCS_Builder_Module_3_1.php on line 158

Add Branding With A Cursor Highlight Color

A Fun And Easy Way To Improve Your Website

A lot of my tutorials tend to be functionality or fixes or things like that. But let’s have some fun! This quick snippet will allow you to change the cursor highlight color on your Divi website to anything you want! We use it on our site, and we think it adds a nice touch of extra branding to subtly impress your site visitors. Try it out!

Divi Assistant Plugin by Pee Aye Creative 1.1.2

FYI: Do It With Divi Assistant!

Why work so hard? You can do this easily with a setting in our Divi Assistant plugin!

Subscribe On YouTube

It’s not going to get much easier than this. To change the default cursor highlight color, first you simply need to add some custom CSS to your website.

Where To Paste The CSS Code

1. Divi Assistant
If you are using our Divi Assistant plugin, simply paste the code in the CSS tab in the custom code window in the Divi Visual Builder.

2. Child Theme
If you are using a child theme, paste this code into the style.css file. If you don't have a child theme, you can generate a child theme directly on your site or download our free child theme.

3. Divi Theme Options Integration
Otherwise, paste this code in your Divi>Theme Options>Custom CSS code box.

If you need help understanding where to paste the code, please check out our complete guide about where to add custom code In Divi.

/*change color of text highlight*/
::-moz-selection {
  color: #ebf8f1;
  background: #2cba6c;
}

::selection {
  color: #ebf8f1;
  background: #2cba6c;
}

Now all you have to do is change the color of the text and the background color to whatever you want! On our site, we made the background color the main green on our site, and the text color the light green in our backgrounds. So feel free to experiment with this, and have fun!

How To Set Cursor Text Highlight Color Using Divi Assistant

Here are the simple steps to set cursor text highlight color using our popular Divi Assistant plugin:

Install and activate the Divi Assistant plugin
Click on the Frontend Helper tab and the Miscellaneous subtab
Enable the setting and adjust the colors to your preference

I hope that is easy enough for you! 😉

how to Set Cursor Text Highlight Color using the Divi Assistant plugin

Learn More About Divi Assistant!

Our flagship "helper" plugin has (121) main features to make your life easier when working with Divi!

I hope you enjoyed learning. Please share your thoughts in the comments below. If you find value in this type of post, please subscribe because we have tons of tutorials in progress to be posted!

Subscribe For More Things Like This!

At the start of each month, we send out a recap newsletter from the month before with family news, Divi news, our latest tutorials, and product news. Occasionally, if the news is too exciting to wait, we will send out another email separate from the monthly newsletter. That’s what you get when you subscribe, and of course you can unsubscribe if you are no longer interested!

Nelson Lee Miller (aka The Divi Teacher)

Nelson is the owner of Pee-Aye Creative and the product creator of many popular Divi Plugins, as well as WordPress products WP Inbox, WP SiteLauncher, and SurelyWP Addons For SureCart. Nelson lives with his wife Tashia and daughters Abrielle and Reiah in the beautiful state of Pennsylvania. Learn more on our About page!

Shop Our Divi Products

Plugins • Courses • Templates

Visit The Shop

Leave A Response!

By commenting you agree to our Blog & YouTube Comments Policy

11 Comments

Miro on June 11, 2020 at 4:11 pm

That’s a nice one. I used it on my site straight away 🙂 Thanks for sharing Nelson.
Reply
Jan on June 16, 2020 at 11:05 am

Hi Nelson,

It’s a simple one but i love it. thx 🙂
Reply
- Nelson Lee Miller (aka The Divi Teacher) Divi Adventure Club Member on June 16, 2020 at 11:57 am
  
  Thanks Jan, I do too!
  Reply
SouL RebeL on June 24, 2020 at 1:00 am

So awesome, thank you so much!
Reply
- Nelson Lee Miller (aka The Divi Teacher) Divi Adventure Club Member on June 25, 2020 at 3:24 pm
  
  You are welcome!
  Reply
Muthyam Bumesh on December 1, 2020 at 2:15 am

Your one of the best and creative person for divi theme, i am fallowing your tutorials that’s amazing and I loved it. Also love you #pee-aye creative 😍😍😍😍😘
Reply
- Nelson Lee Miller (aka The Divi Teacher) Divi Adventure Club Member on December 12, 2020 at 11:24 pm
  
  Thank you Muthyam! Really appreciate your kinds words and I hope you find my content useful!
  Reply
Streater on February 1, 2021 at 5:05 pm

Really cool… is there a way to change the highlight color for areas where the background color is already that color?
Reply
- Nelson Lee Miller (aka The Divi Teacher) Divi Adventure Club Member on February 1, 2021 at 9:42 pm
  
  Hi Streater, I’m not aware of anything like that, I would guess that there is no such thing.
  Reply
ly on November 22, 2021 at 2:41 am

Why did I use no effect
Reply
- Nelson Lee Miller (aka The Divi Teacher) Divi Adventure Club Member on November 23, 2021 at 9:13 pm
  
  I’m not sure what you are asking?
  Reply