Question

I’m using a jQuery plugin called jQtransform (http://www.dfc-e.com/metiers/multimedia/opensource/jqtransform/) which skins HTML form elements like the input box and submit buttons. All is well until I need to use an image as the submit button. I tried the following CSS code but the original button still appears, and not the image.

CSS:

/* this is the submit button */
#search {   
    width: 32px;
    height: 32px;
    padding: 0px;
    margin: 0px;
    border: 0px;
    background: transparent url(../images/template/icons/search.png) no-repeat center top;
    overflow: hidden;
    cursor: pointer; /* hand-shaped cursor */
    cursor: hand; /* for IE 5.x */
}

HTML:

<input type="submit" name="search" value="Search" id="search" />

** HTML code looks like it has been processed by the jQuery plugin when viewed in Chrome’s ‘Inspect Element’ feature. The above is the original HTML code as seen when you select ‘View Page Source’ in Chrome.

What should I do to replace the submit button with my own image? I’m not too good with jQuery…

UPDATE

GREAT! All the answers are working. I must have been thinking too much 🙂

Answer 1

This should work

<form>
<input type="image" src="[some image]" onsubmit="submitForm();" id="search">
</form>