Nowadays, most websites come with a search box to improve surfing experience. To make your website looks good, beside having a nice looking theme, you would need a fancy search box to replace the classic ones.
In this example, I will use this as my search box.
Make sure the background color outside the search box is the same as your design. Now crop the whole search box out.
result:
The picture above explained all.
Replace the “THE_BLANK_SUBMIT_BUTTON_IMAGE” with the image at step 3.
#searchwrapper {
width:310px; /*follow your image's size*/
height:40px;/*follow your image's size*/
background-image:url(THE_SEARCH_BOX_IMAGE);
background-repeat:no-repeat; /*important*/
padding:0px;
margin:0px;
position:relative; /*important*/
}
#searchwrapper form { display:inline ; }
.searchbox {
border:0px; /*important*/
background-color:transparent; /*important*/
position:absolute; /*important*/
top:4px;
left:9px;
width:256px;
height:28px;
}
.searchbox_submit {
border:0px; /*important*/
background-color:transparent; /*important*/
position:absolute; /*important*/
top:4px;
left:265px;
width:32px;
height:28px;
}
Basically what’s going on :
#searchwrapper wrap the whole search box, carrying the whole search box image as its background image.
.searchbox is the text area to enter search keyword, given a transparent background and no border.
.searchbox_submit is the submit button, also given a transparent background and no border.
NOTE:
Both .searchbox and .searchbox_submit have been given an absolute position, you should modify their position, width and height according to your own search box.
Hope this helps!
Thank you so much for the tutorial Buddy.
It was a great resource.
Thanks,
Vinay