Modifying the search box in Genesis

Customizing the search box in a Genesis theme.

I did some searching and found a few really nice tutorials on customizing the search box in a Genesis theme.

First of all we have the WordPress snippets from Studiopress. Which I have also modified.

// Change the word Search inside the Search box
add_filter( 'genesis_search_text', 'sp_search_text' );
function sp_search_text( $text ) {
   return esc_attr( 'Search this site' );
}

A really good tutorial for modifying the search box is from sridharkatakam.com

Here is the CSS code that I used:

/* Search form will expand but is hidden - I decided to comment this out
   .search-form {
    overflow: hidden;
    width: 100%;
}
*/
.site-header .search-form {
    float: right;
    margin-top: 16px;
    width: 50%;
}
.search-form input[type="search"] {
    background: #f5f5f5 url(assets/img/search.png) no-repeat 10px 10px;
    background-size: 15px 15px;
    padding: 10px 3px 10px 30px;
}
.search-form input[type="submit"] {
    border: 0;
    clip: rect(0, 0, 0, 0);
    height: 1px;
    margin: -1px;
    padding: 0;
    position: absolute;
    width: 1px;
}
/* Removes search box text when box is clicked into */
input:focus::-webkit-input-placeholder { color:transparent; }
input:focus:-moz-placeholder { color:transparent; } /* Firefox 18- */
input:focus::-moz-placeholder { color:transparent; } /* Firefox 19+ */
input:focus:-ms-input-placeholder { color:transparent; } /* oldIE ;) */

/** Top bar search **/
.secondary-search {
    float: right;
    font-size: 12px;
    width: 160px;
    height: 10px;
    padding: 2px 5px 0 15px;
    margin-right: 25px;
}
.nav-secondary .search-form input[type="search"] {
    height: 31px;
    border-radius: 7px;
}

/* Shaping the main menu search box */
.genesis-nav-menu .search-form input[type="search"] {
    font-size: 14px;
    padding: 10px 14px 7px 30px;
    width: 143px;
}

/* On focus search box becomes bigger */
.genesis-nav-menu .search-form input:focus {
    width: 170px;
    height: 35px;
    border: none;
    background-color: #f5f5f5;
}

Btw I added my the search box to the top menu bar. To do so I had to add a snippet from StudioPress.

/* Add a search box to the secondary menu - top bar*/
add_filter( 'wp_nav_menu_items', 'genesis_search_secondary_nav_menu', 10, 2 );
function genesis_search_secondary_nav_menu( $menu, stdClass $args ){
    if ( 'secondary' != $args->theme_location )
       return $menu;
 
         if( genesis_get_option( 'nav_extras' ) )
            return $menu;
 
    $menu .= sprintf( '<div class="secondary-search">%s</div>', __( genesis_search_form( $echo ) ) );
 
    return $menu; 
}