Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS How do I customize my WordPress search form?

  • This topic is empty.
Viewing 1 post (of 1 total)
  • Author
    Posts
  • #25799
    iasiis
    Member

    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(/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:

    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)
  • The forum ‘CSS’ is closed to new topics and replies.