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:
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!
Lovely!
Many thanks for this, Ebrahim.
thanks…. this code is so useful…it work well in IE, Firefox and Safari….