3 Ways To Customize Genesis Search Form, Input Box & Button

Most StudioPress child themes include CSS code which hides the submit button for the Genesis search widget.

In this tutorial, i’ll show you which code you need to remove to display the search forms button.

I’ll also give you 3 sets of code which help you style your search box, submit button and other elements associated with your search form.

Important : All CSS code includes the .nav-primary class as the code has been tested using the primary nav menu extras which displays a search form in the primary nav menu. Remove or replace the .nav-primary class selector for use outside the primary nav menu.

Remove CSS Which Hides Button

The first step is to remove the CSS code which hides the search forms button.

In your child themes style.css file, look for this code and remove it:

.search-form input[type="submit"] {
    border: 0;
    clip: rect(0, 0, 0, 0);
    height: 1px;
    margin: -1px;
    padding: 0;
    position: absolute;
    width: 1px;
}

Once you’ve removed the code above, your button will appear somewhere near your search box.

Display Button Inline With Box

Now you might want to bring the button inline with the search form which you can do simply by adding CSS code to your child themes style.css file:

And here’s the result:

You could also replace the button with an magnifying glass.

Replace Search Button With Icon

Note: You will need to add PHP code to your functions file to enqueue dashicons for use on the front end.

This code replaces the search button with a magnifying glass.

To do this we need to filter the search button text and replace it with a dashicon. Here’s the PHP code which goes in your child themes function file and the CSS for your style sheet.

And here’s the result:

Add Icon Inside Search Input Field

This PHP and CSS code enables you to add the search icon inside the search forms input field.

And here’s the result:

Related Tutorials

• Expanding Search In Nav Menu
• Expanding Search Form in Nav Menu
• Genesis Sample Theme – Animated Search Form in Nav Menu
• Add Expanding Search Box To StudioPress Themes Using CSS
• Add Search & Icon To Genesis Mobile Menu