Search box

[davy_yg]

Hi,

I wonder how to create a search box like the following website:

http://www.ferron-pharma.com/?q=en

The search box is on top right corner. Is it using jquery ? Besides the codes, how to create the outlooks ?

[pritaeas]

Jquery has not much to do with it. It is just a form, and the input box has some elaborate CSS styling. Inspect the source for details.

[davy_yg]

http://zenverse.net/create-a-fancy-search-box-using-css/

I think I find it. How to write search box.jpg (with space) file link? Is it search_box.jpg?

I am still working to get my search box in my web page.

[davy_yg]

Almost done with the search box. Now, how to leave the word "Search" in the search box that I have made by default (without having to type it) ?

style.css

#searchwrapper {
width:310px; /*follow your image's size*/
height:40px;/*follow your image's size*/
background-image:url(Images/search box.jpg);
background-repeat:no-repeat; /*important*/
padding:0px;
margin:-30px;
position:relative; /*important*/
left:800px;
}
 
#searchwrapper form { display:inline ; }
 
.searchbox {
border:0px; /*important*/
background-color:transparent; /*important*/
position:absolute; /*important*/
top:5px;
left:20px;
width:146px;
height:28px;
font:arial;
font-style:italic;
color:white;
}
 
.searchbox_submit {
border:0px; /*important*/
background-color:transparent; /*important*/
position:absolute; /*important*/
top:3px;
left:163px;
width:30px;
height:25px;
}

index.html

<div id="searchwrapper"><form action="">
<input type="text" class="searchbox" name="s" value="" />
<input type="image" src="Images/submit2.jpg" class="searchbox_submit" value="" />
</form></div>

I mean if I place the cusor outside the search box and click it the text appears and if I am ready to type in something inside the search box the text disappears. How to do so ?

Just like this website:

http://www.ferron-pharma.com/?q=en