Images for Form Submit Buttons Using CSS

Browsers’ default submit buttons can be boring, ugly, or just not match your site. Whatever your reason, it would be nice to dress up the buttons using CSS when you don’t want to (or can’t) change the HTML to use <input type="image" />

I’ve been struggling to find a way to do it in a cross-browser way, and just recently stumbled upon the answer.

The Problem

Assume the following HTML snippet:

<form action="" method="post">
  <div class="form-submit">
    <input type="submit" name="submit" value="Submit" />
  </div>
</form>

Here’s my first attempt at CSS for the submit button (assume, here, that I have a 101x39px image to use for the submit button):

form .form-submit input {
  display: block;
  width: 101px;
  height: 39px;
  background-color: transparent;
  background-image: url(submit.png);
  background-repeat: no-repeat;
  background-position: 0 0;
  padding: 0;
  margin: 0;
  border: none;
  cursor: pointer;
  text-indent: -9000px;
}

Not to bad. It’s a standard CSS image replacement technique with a few small additions to override some default button styles. But in IE7 and below, the button disappears. Why is that? It seems the text-indent is applied to the whole input, sending it far off the screen.

So what if we remove that text-indent? As you might have guessed, the text still appears on top of the image. Even if we set text-indent: 0 in a conditional comment for IE7 and below, you still have a problem for those browsers.

So what about putting the image into the padding, instead?

  text-indent: 0;
  padding: 39px 0 0 0;
  height: 0;

Once again, the button disappears in IE7 and below.

The Solution

But, what if one day you make a mistake? What if you forget to set height to 0 when you add the padding-top? Amazingly, you don’t get a 78px tall element; it remains 39px tall in all browsers (where all includes IE8, IE7, IE6, Firefox 3.5, Chrome 3, Safari 4, and Opera 10)! Why is that? I have no idea, but it works.

One problem still remains, though. In Opera, the text is still visible on top of the image. So we return to our good friend text-indent. Set it to an arbitrarily large negative number, but keep it at 0 for IE7 and below using CSS in a conditional comment. The button should now be replaced with an image in all browsers.

form .form-submit input {
  display: block;
  width: 101px;
  height: 39px;
  background-color: transparent;
  background-image: url(submit.png);
  background-repeat: no-repeat;
  background-position: 0 0;
  padding: 39px 0 0 0;
  border: none;
  cursor: pointer;
  text-indent: -9000px;
}

And don’t forget, in your IE lte 7 conditional stylesheet:

form .form-submit input {
  text-indent: 0;
}