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 ?

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.

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

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.