Question

I have an input field for a submit button:

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

In CSS I put a background image over the button to look like a magnify glass instead of the default button.

This works in most browsers but I am having problems with IE 7 and the value text showing over the top of the image.

Is there a simple way to get rid of this text without removing it from the value field of the input element? Something to the effect of:

#searchSubmit input[type="submit"][value=Search] {
    text-indent:-999em !important;
}

Any ideas?

Answer 1

Simply add this simple but elegant workaround to your css.

Negative-indent alone unfortunately doesn’t work to remove text from a button element in IE7, but add text-transform: capitalize; and presto!

#searchSubmit {
     text-indent: -9000px;
     text-transform: capitalize;
}

Source: http://css-tricks.com/snippets/css/remove-button-text-in-ie7/