Hi everyone,

If you notice on the very top right hand of this page, you'll see a search field that makes use of the background image to "submit" the search form. If you take a look at the source code, you'll all see that they did not use ImageFormAction.

I've spent many hours trying to figure out how silverstripe.org was able to accomplish this. I tried to mimic this, however I come across the same problem every time-the "Search" title (or label?) keeps appearing, right on top of the image (the background CSS image for the div). What am I doing wrong?? How did silverstripe.org manage to hide the text (title/label) from appearing above the image, yet still allow the title/label to appear when you hover your mouse over the image.

I tried adding #searchbox label {display: none;} to the css, but that didn't seem to help.

Simply speaking, I would like to know how to code the same search form submit mechanism as the one found at the top of this page.

Here is the source code I have:

<div id="searchbox">
		<form id="SearchForm_SearchForm" action="/home/SearchForm" method="get" enctype="application/x-www-form-urlencoded">
	<fieldset>
		<legend></legend>
			<div id="Search" class="field text "><label class="left" for="SearchForm_SearchForm_Search">search</label><div class="middleColumn"><input type="text" class="text" id="SearchForm_SearchForm_Search" name="Search" value="Search" /></div></div>
		<input class="action" id="SearchForm_SearchForm_action_results" type="submit" name="action_results" value="Search" title="Search" />
	</fieldset>
</form>
		</div>

This is the CSS i'm using to style the form:

#searchbox{
	position:relative;}

#searchbox form{
	position: absolute;
	top: 0px;
	right: 0px;
	width: 147px; height: 24px; margin-top: 10px; color: #7e7e7e; padding-left: 15px; padding-right: 30px; padding-top: 9px; background: url(../images/searchfield.png) no-repeat; font-size: 13px;
}
#searchbox form label {
		display: none;
	}
#searchbox label {
		display: none;
	}
#searchbox form input.text {
		background: none;
		border: 0;
		margin: 0;
		width: 140px;
		position: absolute;
		top: 10px;
		right: 34px;
		color: #666;
	}
#searchbox form input.action { display: block; float: right; clear: none; background: none; cursor: pointer; overflow: hidden; width: 24px; height:34px; margin-right: -24px; margin-top: -12px; border: none;}

This is the code I'm using for the search, located in my pages' class Page_Controller extends ContentController:

function SearchForm() {
		  $searchText = isset($this->Query) ? $this->Query : 'Search';
		  $fields = new FieldSet(
			 new TextField("Search", "search", $searchText)
		  );
		  $actions = new FieldSet(
			 new FormAction('results', 'Search')
		  );
		  return new SearchForm($this, "SearchForm", $fields, $actions);
	}

#searchbox form input.action { width: 34px;
height: 24px;
cursor: pointer;
text-indent: -9999px;
background: #fbc900 url(image.gif) no-repeat top right;}

in css

I was able to get it working by adding some padding in the CSS:

#searchbox form input.action {
		display: block; 
		float: right; 
		clear: none;
		background: none; 
		cursor: pointer; 
		overflow: hidden; 
		width: 41px; 
		height:34px; 
		margin-right: 0px;
		margin-top: -12px;
		padding-top: 34px; /* Should match hight value-->for hiding label */	
		border: none;}