Search Box CSS with background searchbox image -How To
Search Box Image Background (right click to download )
Transparent .gif ( to be visible was resized digital - The size for this image is 1px x 1px == right click to download)
CSS Code
#searchcontainer {
width:350px; /*background search box image's width size*/
height:50px;/*background search box image's height size*/
padding:0px;
margin:0px;
position:relative; /*important*/
}
#searchcontainer form { display:inline ; }
.searchbox {
border:0px;
background-color:transparent;
position:absolute;
top:9px;
left:33px;
width:182px;
height:20px;
}
.searchbox_submit {
border:0px;
background-color:transparent;
position:absolute;
top:9px;
left:234px;
width:84px;
height:25px;
}
Html form code:
<div align="center">
<div id="searchcontainer" style="background:url(Search_en.jpg);background-repeat:no-repeat;">
<form name="form1" method="get" action="">
<input type="text" class="searchbox" name="q" value="" />
<input name="image" type="image" class="searchbox_submit" value="" src="1.gif" />
</form>
</div></div>
Leave a comment