Changing the Divi Search Icon Hover Color

Written by Dan Mossop

|

If you'd like to change the hover color of the Divi Theme's search icon, you can do so simply with the following CSS:

/* Change the search icon color */
#et_search_icon:hover:before { color: #ff0000 !important; }

Just replace #ff0000 with the hex code for your hover color of choice.

This is available as an option in Divi Booster from v2.1.4 onwards. You'll find it on the Divi Booster settings page under "Header > Main Header > Search icon hover color".

Related Post: Adding CSS to the Divi Theme

About Dan Mossop

Dan is a Scottish-born web developer, now living in Brisbane with his wife and son. He has been sharing tips and helping users with Divi since 2014. He created Divi Booster, the first Divi plugin, and continues to develop it along with 20+ other Divi plugins. Dan has a PhD in Computer Science, a background in web security and likes a lot of stuff, 

We may earn a commission when you visit links on our website.

4 Comments

  1. Jon Rockoford on January 27, 2021 at 9:43 pm

    That works! Thank you. Now, how do I change the size and color of the X that closes the search? I tried

    .et_close_search_field {
    color:red !important;
    }

    But it does not work…

    Reply
    • dan on January 29, 2021 at 2:42 am

      Hey Jon, you're very close. The icon is actually added using the :after pseudo-element, so you need:

      .et_close_search_field:after {
      color: red !important;
      }

      I've just added a short post on this, which also shows how to do hover effects:

      https://divibooster.com/styling-the-search-box-close-icon/

      Hope that helps!

      Reply
  2. Mikey on June 26, 2019 at 1:28 am

    Awesome thanks for the code, worked well

    Reply
    • dan on June 26, 2019 at 5:11 am

      You're welcome, Mikey!

      Reply

Submit a Comment

Comments are manually moderated and approved at the time they are answered. A preview is shown while pending but may disappear if your are cookies cleared - don't worry though, the comment is still in the queue.

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

New: Divi Preferred Sources Module

The Divi Preferred Sources Module adds Google’s “Add to Preferred Sources” button directly to the Divi Builder, making it easy for visitors to follow your website as a preferred source in Google Search. Add the button to posts, pages, news content, blogs and more, helping interested readers stay connected with your content through Google’s preferred sources feature.

Learn more about Divi Preferred Sources Module

Get this feature

This feature is available in the following plugins:

Divi Booster

Get Divi Booster

Compatible with

Divi 5

Divi 4