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

4 Comments

  1. 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
    • 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. Awesome thanks for the code, worked well

    Reply
    • 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 *.

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