Hide Text from Submit button with CSS

Here is the solution of how to get rid of your submit button’s text with CSS and not only that, we also are going to replace the entire button with an image.

You are not going to believe the hack that I had to used to make it work in IE6… seriously, when the hell is this browser going to die? Another nightmare of morning thanks to it.

The HTML Code

<input type="submit" class="form-submit" value="Search" id="edit-submit" name="op"/>

The CSS Code

#edit-submit {
  width: 25px;
  height: 25px;
  text-indent: -9999px;
  background: url(../images/icon-search-25x25.gif) left top no-repeat; /* path to your image */
  border: none;
  margin: 0 0 0 10px;
  padding: 0;
  color: transparent;
  text-transform: capitalize;  /* This is the IE hack   */
}

Yes, I know it seems ridiculous use a text-transform property to make the text disappear, but we are talking about IE6.

Enjoy and convince your clients to stop using IE6.

Entry posted on June 9th, 2009 at 08:22 under Browsers, CSS.
Follow any responses through the RSS 2.0 feed , leave a response, or trackback from your own site.