Follow us

Replace the Divi Search Button with an Icon | Divi Soup

Want to learn how to use CSS with Divi?

Our CSS & Divi Beginner Course is now open for enrollment!

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 smile

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.

Replace the Divi Search Button with an Icon

 

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.

Complete CSS
/*---------------------------------------------------------------*/ 
/*------Replace the Search Button with an Icon by Divi Soup------*/ 
/*---------------------------------------------------------------*/

/*Hide the search button*/

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

/*Add padding to the search input field*/

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

/*Add the icon*/

.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;
}

/*---------------------------------------------------------------*/ 
/*---End - Replace the Search Button with an Icon by Divi Soup---*/ 
/*---------------------------------------------------------------*/

 

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. smile

Michelle X

Michelle Nunan is a multi-award winning marketer & trainer and full time Divi educator as well as a mother of two beautiful girls and two cheeky Black Labradors called Harley & Chaz. Michelle has been building websites since the late nineties, back in the days of GeoCities and Napster, before the web was the wonderful place it is now.

Related Posts

Enter your details below to get notified of the launch and early bird pricing

You have successfully joined the waitlist!

Pin It on Pinterest

Sharing is caring

Share this post with your friends!