• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

WP SITES

2785

Original Genesis & WooCommerce Tutorials & 6000+ Guaranteed Code

Snippets

  • Try Premium
  • Log in

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.

search box without button genesis

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.

primary navigation extras - search form

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.

search buton

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:

search form inline with submit button

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:

search button icon

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:

icon inside search input field

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

Search

Reader Interactions

Comments

  1. Charlotte B. says

    November 24, 2014 at 10:41 pm

    Thanks so much for the tutorial! It was so helpful.

    -Charlotte

    Log in to Reply
  2. Alistair says

    June 24, 2014 at 1:26 pm

    HI Brad,
    I am try to do the REPLACE SEARCH BUTTON WITH ICON in the side bar but it is leaving the submit text in and not adding the icon

    Log in to Reply
    • Brad Dalton says

      June 24, 2014 at 1:41 pm

      Hello Alistair

      Yes i didn’t include the solution for that in this post as i haven’t worked it out yet so the post only covers whats there at the moment.

      Will update the post at some stage when i work out how to do that.

      Log in to Reply

Leave a Reply Cancel reply

You must be logged in to post a comment.

Primary Sidebar

Code written by Brad Dalton specialist for Genesis, WooCommerce & WordPress theme customization. Read More…

Advertise · WPEngine · Genesis · Log in

  • Access Problems
  • Account Details
  • Consulting
  • Tags
 

Loading Comments...
 

You must be logged in to post a comment.