overwrite default search input with image

Hey all i currently use this as a search form

<div id="search"><form action="index.php" method="get">
		<input type="hidden" name="a" value="search" />
		<input type="text" name="q" size="18" value="{$query}" />
		<input src="http://www.anachrony.net/test/images/searchbutton.jpg" type="image" value="Search" />
	</form></div><br />

Code (markup):

See Demo: http://www.anachrony.net/test/
deafult input field is on and not really centered.

Overwriting of the default "go" search button works like it should, but when i try the same with the input field, its not input, its like a link like the "go" ( submit ) button.

I allready tried a few variations found on the web, but they all didnt worked out so great. For example, the input field image moved all the way to the left when writing something long in the field.

Is someone able to point me to the right direction??

Thanks,
Seb

 

Hi Basti check blow code

Add one class in your page css

<style>
.search-btn {
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
vertical-align: -50%;
line-height: 10px;
}
</style>

and add your code

<div id="search"><form action="index.php" method="get">

<input type="hidden" name="a" value="search" />
<input type="text" name="q" size="18" value="{$query}" />
<input type="image" class="search-btn" value="Search" src="http://www.anachrony.net/test/images/searchbutton.jpg" align="middle" />

</form></div><br />

Regards
TejBusiness

If you need any more help so contact me direct mail: My id is:tejcreative@gmail.com