CSS: Submit Button Image Replacement

Before today I had never used CSS to replace the submit button on forms with an image. I’ve either not styled the button, or just changed the colours the button uses. Today I needed to use an image as part of a design and it was very simple. I was quite surprised because I thought it would be a PITA. Read more to see my method.

To start with you need a submit button using something like the following HTML;

<input type="submit" value="Search" id="searchButton" />

Then use the following CSS to apply an image over the default button;

background: url('directory/yourImage.png') no-repeat center bottom;
border: 0 none;
width: 22px;
height: 20px;
margin-left: -1px;
padding-top: 20px;
overflow: auto;
text-indent: -1000px;
cursor: pointer;
position: absolute;

Set the padding attribute to the same value as the height of the image in order to replace the submit button. The margin and padding attributes are particular to Firefox and I used these to get the submit button to align with the text input. To get the submit button to line up in IE, use a conditional comment in your <head> to apply different position and margin attributes;

<!--[if IE]>
<style type="text/css">#searchButton{position: relative; margin-left: -5px;}</style>

You will have to play around with the text input’s padding in order to make it the same height as the submit button. But you can see what you can achieve in the following screenshot;

This method works in IE6, 7, 8 and Firefox. It also works in Opera, but I haven’t got the submit button to align with the text input. Not a great problem for me as this design is part of an intranet that, for the most part, will be accessed on IE.