How to Customize Your Text Selection on Your Divi Website

by | Nov 13, 2020 | Divi Tutorials | 16 comments

Welcome to D I V E M B E R (Divi + November) here at Divi Life! All month long during November we’re going LIVE on Facebook & YouTube, and publishing new tutorials, freebies, new product features, new product releases, and more! Make sure you subscribe to our email list so you don’t miss any of the action or awesome free stuff! And, follow us on Facebook & YouTube to be notified when we go LIVE.

In our tutorial on How to Customize Your Browser Scrollbar, we talked about small changes with big impact that can add that extra bit of color and branding to your website.

We’re back today with something similar! In this Divi tutorial, I’m going to show you how to customize the select color on your Divi website.

Not sure what I’m talking about!? Let’s look at a before and after:

Before our customization:

After our customization:

The CSS to Customize Your Website Select Color

Here’s the CSS! As you can see, it’s only a few lines. You can copy this CSS and place it in one of the following places:

  1. In the Custom CSS Box in Divi Theme Options
  2. In your Child Theme’s Style.CSS File (learn how to create a Divi Child Theme, if you don’t know already)
  3. In the custom CSS box within the Divi Page Settings (on the page you’d like to customize)
/* CSS to Customize Website Select Colors */
::-moz-selection { /* Code for Firefox */
  color: #ffffff;
  background: #7d2ae8;
}

::selection {
  color: #ffffff;
  background: #7d2ae8;
}

Obviously change the colors as desired, but that’s it! Simple huh?

Be sure to subscribe below to be notified of new Divi tutorials, Divi freebies, and more!

16 Comments

  1. Avatar

    Hello,
    Really good and the funny thing is that
    I was wondering for a few days how to do that!
    Because I saw that on many sites and in particular yours!
    Thanks again

    Reply
    • Avatar

      Thanks for watching, Bruno! I’m glad the timing worked out 🙂

      Reply
  2. Avatar

    Loving the tutorials. Thanks a lot from New Zealand.
    Curious if could maybe do some videos on linking up the emails and chat bots.
    Cheers again!

    Reply
    • Avatar

      Thanks for watching, Rus! And I’ll add that to the list 🙂

      Reply
  3. Avatar

    Replay > Germany

    Reply
  4. Avatar

    Thanks Tim, Super cool
    Replay from Belgium

    Reply
    • Avatar

      Glad you like it, Marc 🙂

      Reply
  5. Avatar

    Replay > Norway 🙂

    Reply
  6. Avatar

    Live from Texas

    Reply
    • Avatar

      Reply from Texas

      Reply
  7. Avatar

    Comment A designer built my web website using the divi builder for my blog in 2016. From 2017-2021. I was pre-occupied but after a live change wanted to return to blogging. Could no longer use the divi builder. i tried unsuccessfully the blue sky program but after a month of failed tutorials became very frustrated.
    Do I have to pay again for the theme?
    Is it related to Divi Life?
    Any help would be much appreciated Or contact with a divi designer . Thank you.

    Reply
    • Avatar

      You will want to make sure Divi is up to date. So you may need to renew your license if you haven’t already. Elegant Themes support should be able to help you.

      Reply

Submit a Comment

Your email address will not be published. Required fields are marked *