Changing the Divi Search Icon Hover Color

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

This post may contain referral links which may earn a commission for this site

More Divi Tips

Divi Booster

Hundreds of new features for Divi
in one easy-to-use plugin

Download Divi Booster

4 Comments

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
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 Cancel reply