Question

I’m trying to create an expandable search bar; like http://www.apple.com uses. (Or I guess previously had up)

I’ve been trying to work with this code;

http://www.cibgraphics.com/blog/article/create_an_expandable_search_form

I currently have all that code via the tutorial plugged into my test site – and it’s not appearing. Can anyone help me figure out why? Test site located at; http://www.o s m p r o d u c t i o n.com

Also, once I get this implemented; I’d like to figure out how to add the nice transition similar to what apple has in the expandable, rather then the clunky one the code in the above links has. So I guess the sub-question would be; how could I implement a smoother transition to the animation of the search bar becoming larger?

I’m pretty much using exactly what’s inside the code of that link; but it’s also below.

Mark-Up:

<section>
    <form class="search_form">
        <input type="search" class="searchinput" placeholder="Search"/>
        <input type="submit" value="Search" class="searchsubmit"/>
    </form>
    <div class="clear"></div>
</section> 

CSS:

<!--Styles for Search Bah-->

.clear {
    clear: both;
}  

.search_form {
    background: #fff;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -o-border-radius: 8px;
    -ms-border-radius: 8px;
    border-radius: 8px;
    border: 1px solid #d6d6d6;
    padding: 3px;
    padding-left: 8px;
    -webkit-box-shadow: inset 0 2px 2px rgba(0,0,0,.3);
    -moz-box-shadow: inset 0 2px 2px rgba(0,0,0,.3);
    -o-box-shadow: inset 0 2px 2px rgba(0,0,0,.3);
    -ms-box-shadow: inset 0 2px 2px rgba(0,0,0,.3);
    box-shadow: inset 0 2px 2px rgba(0,0,0,.3);
    float: left;
}  


.searchsubmit {
    display: block;
    height: 23px;
    width: 23px;
    line-height: 29px;
    background: url('../images/searchicon.png') no-repeat 3px 4px;
    text-indent: -9999px;
    border: none;
    vertical-align: middle;
    float: right;
}  

.searchinput {
    width: 200px;
    font-size: 13px;
    color: #999;
    background: #fff;
    vertical-align: middle;
    margin-top: 4px;
    border: none;
    float: left;
    outline: none;
}  

.searchinput:focus {
    width: 400px;
}  

.searchinput {
    width: 200px;
    font-size: 13px;
    color: #999;
    background: #fff;
    vertical-align: middle;
    margin-top: 4px;
    border: none;
    float: left;
    outline: none;
    -moz-transition: all 0.3s linear;
    -webkit-transition: all 0.3s linear;
    -o-transition: all 0.3s linear;
    -ms-transition: all 0.3s linear;
    transition: all 0.3s linear;
}  

::-webkit-search-decoration
{
    display: none;
}

input[type=search]{
    -webkit-appearance:textfield;
    -webkit-box-sizing:content-box;
}  

And I guess lastly; How can I tie the functionality, of a working ‘Search form’ with my new one I’m currently using? Would a quick way be; somehow tying the ‘standard WP search box’ with my new one I created? Either customize it to look like my new one, or define my new one with it’s functionalities and hide the previous one?

Update: I have the search bar setup basically in my test site at the top right of the screen; but now the ‘search button’ that I’m calling isn’t appearing to the right of it as it should. And I’m stuck with figuring out how to tie the functionality of a standard WP working search form with it.

Here is the PHP mark-up of the standard WP functional Search bar that came with the theme; I think I just need to migrate/integrate the styles and scripts via my new ‘Search Bar’, but now – how?

<ul>
<!-- <div align="center"> -->
<form method="get" id="searchform" action="<?php bloginfo('home'); ?>/">
        <!-- <input type="text" value="<?php the_search_query(); ?>" name="s" id="s" size="20" /> -->
        <input type="text" value="<?php _e('Search','emerald_stretch'); ?>" name="s" id="s" size="20" onfocus="if (this.value == '<?php _e('Search','emerald_stretch'); ?>') {this.value = '';}" onblur="if (this.value == '') {this.value = '<?php _e('Search','emerald_stretch'); ?>';}" />
        <input type="submit" id="searchsubmit" value="<?php _e('Find','emerald_stretch'); ?>" />
</form>
<!-- </div> -->
</ul>

I just attempted to add the new styles and appearance of the new one I created by adding the classes; and now it appears in place of the old WP one – but on focus it disappears?

<ul>
<!-- <div align="center"> -->
<form method="get" class="search_form" action="<?php bloginfo('home'); ?>/">
        <!-- <input type="text" value="<?php the_search_query(); ?>" name="s" id="s" size="20" /> -->
        <input type="text" class="searchinput" value="<?php _e('Search','emerald_stretch'); ?>" name="s" id="s" size="20" onfocus="if (this.value == '<?php _e('Search','emerald_stretch'); ?>') {this.value = '';}" onblur="if (this.value == '') {this.value = '<?php _e('Search','emerald_stretch'); ?>';}" />
        <input type="submit" class="searchsubmit" id="searchsubmit" value="<?php _e('Find','emerald_stretch'); ?>" />
</form>
<!-- </div> -->
</ul>

Answer 1

Your search box is working fine by the looks of it. Look at the very bottom left hand corner of your site. If your’re trying to get the green search box on the upper right hand corner of your site to reflect this type of animation, then you need to properly reference the CSS you have specified.