How do I customize my Wordpress search form?

Question

hello,

Mission

i would like to customize the search field and button on my wordpress blog.

the search textfield and button i have in mind will have 3 states:

off :hover :focus

so i will need to have 3 different DIV ids for each of these 3 states.

Search's Text Field specifics

additionally I will need there to be the text "search site" initially loaded into the search's text field. when a user clicks into the search's text field that initial text will disappear and the users cursor will appear blinking. the user can then type in their search keyword. if after typing in their keyword they happen to click off the search's text field, their keyword will remain in the text field intact. if they decide to delete their keyword and click off of the search's text field , the text "search site" will reappear.

Search's Button specifics

the search button will have to have the text "search" that is centered vertically and horizontally.

Current State of my Search Text Field and Button

my current search form and site can be seen here at criticear

i have been able to make my comment form text fields have the 3 states i mentioned above since I got the code from ottodestruct's worddpress threaded comments tutorial.

the thing is that i do not quite understand how to take this comment form css and apply it to my search's textfield and button. you can check out my comment form on my blog criticear's single post page

here is my search form CSS:

/*
SEARCH FORM
*/

form#searchform
                    {
                    display:block;
                    width:255px;
                    height:20px;
                    position:absolute;
                    top:56px;
                    left:753px;
                    }

.searchbutton
                    {
                    color: #0066ff;
                    border: 0px solid;
                    display:block;
                    width:45px;
                    height:20px;
                    background: #d2e4ff;
                    position:absolute;
                    top:0px;
                    left:202px;
                    -moz-border-radius-bottomright: 4px;
                    -moz-border-radius-topright: 4px;
                    -webkit-border-bottom-right-radius: 4px;
                    -webkit-border-top-right-radius: 4px;
                    font-size: 12px;
                    }

.searchbutton:hover
                    {
                    background-color: #0066ff;
                    color: #ffffff;
                    font-size: 12px;
                    }

.searchfield
                    {
                    background:url(/images/search-field-shadow.png) top left repeat-x #666666;
                    color: #eeeeee;
                    border: 0px solid;
                    position: absolute;
                    top:0px;
                    left:0px;
                    display:block;
                    width:200px;
                    height:20px;
                    -moz-border-radius-bottomleft: 4px;
                    -moz-border-radius-topleft: 4px;
                    -webkit-border-bottom-left-radius: 4px;
                    -webkit-border-top-left-radius: 4px;
                    font-size: 12px;
                    }

here is my searchform.php code:

    <form method="get" id="searchform" action="<?php bloginfo('url'); ?>/">
   <input type="text" value="<?php the_search_query(); ?>" name="s" id="s" class="searchfield" />
   <input type="submit" id="searchsubmit" value="search" class="searchbutton"/>
</form>

here is the searchform php call i have in my header.php :

    <?php get_search_form(); ?>

If you have any questions or need more info than let me know. I hope you can help. Thanks.

Answer 1

You need to use CSS to style the form as you want to, and JavaScript or a JavaScript library (like jQuery) to create the focus/blur effect you're looking for. I'm not going to do the whole thing for you, but I'll just point you in the right direction.

First of all, you don't need "3 different DIV ids for each of these 3 states." CSS has pseudo-selectors for :hover and :focus, so that's all you need. If you ever get caught up on that or run into browser problems, you can always use JavaScript (again, I recommend jQuery).

For the "Search site" effect in the input box, you'll be doing something like this (this is jQuery):

$('input[name=s]').focus(function(){
    if ($(this).val() == 'Search site')
     $(this).val('');
});
$('input[name=s]').blur(function(){
    if ($(this).val() == '')
     $(this).val('Search site');
});

The last thing I'll mention is that your CSS classes searchfield and searchbutton make your HTML more verbose than it needs to be. You can easily access these fields in your CSS without having to individually declare them in your HTML:

#searchform input[name=s] { } /* use this instead of .searchfield */
#searchform input[type=submit] { } /* use this instead of .searchbutton */