Q19: Replace the Divi Search Button with an Icon

I have been using this effect a lot in my child themes lately so thought I would share it with you in a Quick Snack

Today I am going to show you how to replace the search button with an icon, on both the Divi search module and also the default search widget.

There really isn’t much to it, just a little CSS. Here is what it will look like (with no additonal styling).

So let’s get cooking!

Ingredients

The Divi Theme from Elegant Themes

Cooking time

Less than 5 minutes!

Preparation

All we need to do is add the Search Module to a page, open up the module settings and in the Advanced tab give it a CSS Class of ds-icon-search then Save & Exit.

There is nothing you really need to do for the search widget, it is added as default on posts when not using the Divi Builder, our CSS will take care of the rest.

Method

Now for our CSS, here is what we are doing:

First we make the button background and text colour transparent, we do this rather than remove it so that we can still use it’s built in click function. We also remove the border, set a width and add a z-index so our ‘invisible’ button will sit on top of our icon.

.ds-icon-search input.et_pb_searchsubmit,
.widget_search input#searchsubmit {
    background: transparent;
    color: transparent;
    border: none;
    width: 55px;
    z-index: 2;
}

Next we add some right padding to the search input field so any text entered doesn’t run into our new icon.

.ds-icon-search input.et_pb_s,
.widget_search input#s {
    padding-right: 55px !important;
}

And finally, we add the icon as a pseudo element, set the font size, padding and also the z-index so it sits underneath our invisible button, thus making it look like we are clicking directly on the icon. I am using the built in ETModules font but you can change this to Font Awesome or whatever you may have integrated.

.ds-icon-search .et_pb_searchform:before,
.widget_search::before {
    content: '\55';
    position: absolute;
    font-family: 'ETModules';
    z-index: 1;
    right: 0;
    font-size: 20px;
    padding: 8px 20px;
}

Copy the complete CSS from the toggle below and paste into your child theme stylesheet or Divi > Theme Options > Custom CSS.

And that’s it, check your page and see your new, sleeker icon search buttons.

If you found this helpful please leave a comment and subscribe to my newsletter for all my latest Divi related content.

Michelle X