How Can I Make A Search Bar

i Was Wondering How Can I make The Search Bar Like Forumotion Did On My SIte

I tried researching it on Google and I found something that may help you.
Since it's not allowed to post links (except images link), I'll re-post it and put credits from my source.

1. Design your own search box.



2. Crop it out
Make sure the background color outside the search box is the same as your design. Now crop the whole search box out.

result:

3. Create a blank image as submit button



4. HTML codes for the search box

Code:

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

Replace the “THE_BLANK_SUBMIT_BUTTON_IMAGE” with the image at step 3.

5. CSS codes for my search box

Code:

#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.



Credits to: zenverse.net

Hope it helps.

Thanks Bro But How Can I make The Round Edges Like Forumotion Search Bar

^

As far as I know, you should be the one to create that kind of search bar image.
If you want to have that kind of search bar image, try making a request in the Graphics Section.

Like This One



It's Round Edges How Can i Do that

^

Sorry but I have no idea.
I just copy and pasted that tutorial here.
Again, you can just ask a request in the graphics section if you want to have a search bar having rounded edges.
That rounded edges is just an image. Try seeing it very closely, the whole image is really a rectangle. Then by doing some photoshop or whatever, round edges are made.