Several solutions for applying a custom image to a ‘RESET’ button already exist, but there is better (and easier) way to do it I believe, without Javascript and only a few lines of CSS.

UPDATE: “text-indent” doesn’t seem to work in IE. Check the updated code below.

Button Image:
Dimensions: 62 x 22 pixels

HTML Markup:

1

<input class="reset_button" type="reset" value="" />

CSS:

1
2
3
4
5

.reset_button {background:url(../img/reset_button.gif) no-repeat; /* Define Image Path */border:0;width:62px; /* Define Image Width */
 
height:22px; /* Define Image Height */
 
}

Now, lets see it in action:

Hope it helps!