Grow your CSS skills. Land your dream job.

How do I customize my WordPress search form?

  • # August 19, 2009 at 2:01 pm

    hello,

    Mission

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


    Behaviour

    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:

    http://criticear.co.cc/

    i have been able to make my comment form text fields have the 3 states i mentioned above since I got the code from a tutorial on the this site:

    http://ottodestruct.com/blog/2008/wordpress-27-comments-enhancements/

    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 single blog post page here:

    http://criticear.co.cc/ipsum/

    here is my search form CSS:

    Code:
    /*
    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(http://cdn.css-tricks.com/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:

    Code:

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

    Code:
    < ?php get_search_form(); ?>

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

Viewing 1 post (of 1 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".