//Cross Browser CSS Image Replacement on Inputs

Filed under Code

Tagged: ,

Disclaimer: I know image replacement isn’t ideal but sometimes we have to do it, plus it does offer up the opportunity for rollover effects using sprite backgrounds without javascript (at least in IE7+).

Here’s a quick solution to the problem of using regular CSS image replacement on inputs. The text-indent method fails in IE so we need a slightly different approach.

HTML:

<input type="submit" class="submit" />

CSS:

input.submit {
  display: inline-block;
  background: url(submit.png) no-repeat left top;
  width: 120px; // match width of background image
  height: 40px; // match height of background image
  text-indent: -9999px;
}

Because IE screws this up by not acknowledging the text-indent rule we need to take another approach. If text-indent is the horizontal approach to hiding text for small objects it made sense to try hiding the text vertically using line-height.

CSS take 2:

input.submit {
  display: block;
  background: url(submit.png) no-repeat left top;
  width: 120px;
  height: 40px;
  line-height: 100px; // must be at least the font-size plus the button height
  overflow: hidden; // only show what is within the desired dimensions
}

So there you go. The downside is that you have to use display: block; on the input. Usually this won’t be much of an issue however if you have multiple submit buttons or links next to the buttons then you’ll have to get your float on.

One Response to Cross Browser CSS Image Replacement on Inputs

  1. I can’t remember ever having this much difficulty with IE7/Image replacement/submit buttons, but I seem to have it all the time, lately.

    All anyone in forums ever suggests is using the button element or using input type=image. Sometimes, you don’t have any control over the HTML.

    Great fix, Robert, thanks!

Leave a Reply