- This topic is empty.
-
AuthorPosts
-
August 19, 2009 at 2:01 pm #25799iasiisMember
hello,
Mission
i would like to customize the search field and button on my wordpress blog.
Behaviourthe search textfield and button i have in mind will have 3 states:
off
:hover
:focusso 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 Buttonmy current search form and site can be seen here:
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:
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.
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.