简体   繁体   中英

How do I replace the Submit Button with an Image? [jQuery jQtransform plugin]

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 :)

This should work

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

如何使用旧的HTML <input type="image" ... />呢?

<img type="image" src="img src..." id="search" />

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM