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
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…
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!
Awesome thanks for the code, worked well
You're welcome, Mikey!