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.