Custom Image for Reset button, without Javascript

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:
Reset Button 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!

4 Responses to “ Custom Image for Reset button, without Javascript ”

  1. Lovely!

    Many thanks for this, Ebrahim.

  2. thanks…. this code is so useful…it work well in IE, Firefox and Safari….

  3. Very helpful, thank you!

  4. wow! great. Very helpful. Thak u…

Leave a Reply

Anti-Spam Image