CSS: Implementing CSS Sprites with input button image - input

Question

This button is before CSS Sprites
<input type="image" src="/images/search-button.png" value="" id="search-button">
I'm trying to implement CSS Sprites with one of my search form and the problem is that if I use
<input id="search-button" class="sprites1" type="submit" value="">
it will look something like this.
As you can see the image on the right doesn't look right, but it is click-able.
Then I tried with
<span id="search-button" class="sprites1"></span>
Then it looks right! But!! I can't click on it.
So here is my CSS sprites code.
What I have to implement to get it look the one I want and I can click on it?
.sprites1 {
background: url('result.png');
}
#search-button {background-position: -0px -462px;
width:16px; height:16px; float:right; }

Answer 1

The problem here is the default css that the browser uses on elements. You should try resetting that css. I often use the following snippet:
/* reset css of buttons */
.cssresetbutton {
border-width: 0px;
border-style: none;
background: inherit;
font: inherit;
color: blue;
padding: 0px; }
.cssresetbutton:active {
border-width: 0px;
border-style: none;
background: inherit;
outline: 0;
box-shadow: none; }
try adding the cssresetbutton class to your input element and see if it works.
EDIT:
You can also try not using a input[type=submit] element. For example:
<span id="search-button" class="sprites1" onClick="document.getElementById('formid').submit()"></span>
It will submit the form#formid element when clicked.