CSS: Implementing CSS Sprites with input button image

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.

enter image description here

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>

enter image description here

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; }

FRD · Accepted Answer · 2012-05-01 22:24:41Z

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.

edited May 1, 2012 at 22:24

answered May 1, 2012 at 21:47

FRD

2,2443 gold badges19 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

12 Comments

FRD Over a year ago

are you inserting it BEFORE the sprites1 class? like class="cssresetbutton sprites1". It makes a difference.

FRD Over a year ago

before, like this class="cssresetbutton sprites1". let me know if it works.

FRD Over a year ago

Hmm... can you explain to me why the "background-position: -0px -462px;"? Why 462px? Can you try removing it (keeping the cssresetbutton class)? See if it changes anything?

FRD Over a year ago

Try not using a input element. For example: <span id="search-button" class="sprites1" onClick="this.form.submit()"></span>. When you click it, it should work just as a input[type=submit] element, trying to submit the related form. See if that works.

FRD Over a year ago

you mean that the cursor doesn't appear as that clicking hand (or something)? that's simple: add 'cursor: pointer' to the #search-button css. Or, inline: <span id="search-button" class="sprites1" onClick="this.form.submit()" style="cursor: pointer"></span>

|

Collectives™ on Stack Overflow

CSS: Implementing CSS Sprites with input button image

1 Answer 1

12 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

12 Comments

Your Answer

Sign up or log in

Post as a guest

Related