Hey, I'm trying to update a search box on a site but getting stuck somewhere along the line!

If I make the search box in plain Html and CSS is looks great, but I need to include some of the old search box function and I think thats causing the problem.

I can make the "new" form without any problems, but I cant seem to include my "Old" forms functions (as in the distance radius)

Hope all this makes sense as it doesn't to me!



The code for the search form is:

 <div id="postcodeSearch">
     <div class="fg-buttonset fg-buttonset-single">
     <form method="post" action="./search.php">
     <span>Enter your postcode here</span>
     <input type="text" name="zip" id="zip" title="(e.g. AA10 9ZZ)" onBlur="this.value=this.value.toUpperCase()" value="<?PHP if(isset($_POST['zip'])) echo $_POST['zip']; ?>"/> 
     <span>and find restaurants</span>
     <br/>
     <button type="button" class="fg-button ui-state-default ui-priority-primary ui-corner-left" value="5">within 5 miles</button>
  	 <button type="button" class="fg-button ui-state-default ui-priority-primary" value="10">within 10 miles</button>
	 <button type="button" class="fg-button ui-state-default ui-priority-primary" value="20">within 20 miles</button>
	 <button type="button" class="fg-button ui-state-default ui-priority-primary ui-corner-right" value="50">within 50 miles</button>
     <button type="submit" name="submit" class="fg-button ui-state-default ui-corner-left ui-corner-right">Search</button>
	 <input type="hidden" name="radius" id="radius" style="display:none" value="<?PHP if(isset($_POST['radius'])) echo $_POST['radius']; else echo '5'; ?>">
	</select>
	   </form>
    </div> 
</div>

Now I want to change the form to look like this example:

HTML:

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

CSS:

#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;
}

A link to the site would be helpful.

In your new code, I'm not sure what you're trying to do with this:

<input type="image" src="THE_BLANK_SUBMIT_BUTTON_IMAGE" class="searchbox_submit" value="" />

When I use an image for the submit button it all goes into the CSS. In this example my XHTML for the submission button looks like this:

<input type="submit" value="Send" class="submit" />

And my CSS looks like this:

.submit {
    width: 186px;
    height: 75px;
    background: url(images/sendemail.jpg);
    text-indent: -5000px;
    border: none;
    margin-left: 120px;
}

Thats the place holder for the submit button as in this example http://zenverse.net/create-a-fancy-s...box-using-css/