Change search form button text to image - html

Question

I can't seem to get my head around the following problem. So I procured a template of a search form which I then changed to fit my design requirements but I can't seem to be able to change the value=s bit to an image of a search box button. Please see http://jsfiddle.net/p9URB/. The code is as follows:
HTML
<form action="/search" method="get" id="search_form" class="clearfix voicetron" data-ds-protection="enabled">
<div id="search_holder">
<input type="text" id="search_field" name="q" value="" title="Enter search term" placeholder="Search" data-validators="required" data-speech-enabled="" data-search-engine="oracle" x-webkit-speech="x-webkit-speech" autocomplete="off">
<input type="text" id="search_suggest" value="" placeholder="" disabled="">
<input type="submit" value="y" data-submit-text="s" class="btn_search iconify" title="Search">
</div>
</form>
CSS
#search_form{
position:relative;
margin:10px 0;
float:right
}
#search_form #search_holder{
display:block
}
#search_form #search_holder input[type="text"]{
font-size:13px;
width:180px;
height:26px;
margin:0;
position:absolute;
right:0;
padding:0 32px 0 6px
}
#search_form #search_holder #search_field{
z-index:3;
border:1px solid #C9C9C9;
background:url("") #fff;
-webkit-border-radius:5px;
-moz-border-radius:5px;
-o-border-radius:5px;
-ms-border-radius:5px;
border-radius:5px;
text-shadow:0 0 1px #fff
}
#search_form #search_holder #search_field:focus,#search_form #search_holder #search_field:hover{
border-color:#acb1b4;
color:#123
}
#search_form #search_holder #search_field:-moz-placeholder{
color:#a6a7a8
}
#search_form #search_holder #search_field::-webkit-input-placeholder{
color:#a6a7a8
}
#search_form #search_holder #search_field:-moz-placeholder{
color:#a6a7a8
}
#search_form #search_holder #search_suggest{
z-index:2;
border:none;
background:#fff;
border:1px solid #fff;
-webkit-border-radius:5px;
-moz-border-radius:5px;
-o-border-radius:5px;
-ms-border-radius:5px;
border-radius:5px;
color:#9da2a8
}
#search_form #search_holder .overTxtLabel{
z-index:113
}
#search_form .active{
color:#fff;
background:#a6a7a8
}
#search_form .btn_search{
z-index:3;
position:absolute;
top:4px;
right:1px;
display:block;
color:#a6a7a8;
width:28px;
height:21px;
font-size:17px;
line-height:21px;
text-align:center;
font-weight:400;
background:0 0;
border:0;
border-left:1px dotted #a6a7a8
}
#search_form .btn-anchor{
background:0 0;
border:0;
border-bottom:1px solid #ccc;
color:#666;
margin:0 10px;
font-size:10px;
padding-bottom:2px;
font-weight:400
}
#search_form.voicetron [name="q"]{
padding-right:34px;
width:170px;
line-height:17px
}
#search_form.voicetron .btn_search{
color:#71767a
}

Answer 1

You can use an input type of image as your submit button:
<input type="image" src="/my/image/location.png" />
Instead of styling up a submit button. As far as I know, the input type of image replicates the submit behaviour of a submit button.

Answer 2

Add this to btn_search iconify class of css and specify an image.
background: url("your_url.png") no-repeat scroll 0 0 transparent;

Answer 3

You have set input value="s" so change it to value="" and add background image for that button
#search_form.voicetron .btn_search{
color:#71767a;
background-image:url('http://findicons.com/files/icons/1389/g5_system/16/toolbar_find.png');
background-repeat:no-repeat;
}
Js Fiddle

Answer 4

You can simply treat the button as a block element and remove the text with
text-indent:-9999px;
then set a background image.
You probably also want to add
cursor:pointer;
As it doesn't look like a button at the moment.