1792 Posts in 588 Topics by 560 members
|
Page:
1
|
Go to End | |
| Author | Topic: | 1523 Views |
-
Image as a submit button; without using ImageFormAction
16 December 2009 at 3:07pm Last edited: 16 December 2009 3:21pm
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);
} -
Re: Image as a submit button; without using ImageFormAction
16 December 2009 at 8:25pm
#searchbox form input.action { width: 34px;
height: 24px;
cursor: pointer;
text-indent: -9999px;
background: #fbc900 url(image.gif) no-repeat top right;}in css
-
Re: Image as a submit button; without using ImageFormAction
17 December 2009 at 8:58am Last edited: 17 December 2009 9:00am
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;}
| 1523 Views | ||
|
Page:
1
|
Go to Top |
