How to remove text on the input type= submit? (IE7)

HTML & CSS
1

I have a search form on this website header area

This is the website: http://www.powerful.com.my/

The search button is generated using the input type=“submit”

Here’s the code

<input type=“submit” value=“Search” id=“searchsubmit” />

I’ve used an icon as a button instead of the boring searh button that is generated by default.

So here’s the CSS i used


input#searchsubmit {
			cursor: pointer;
			text-indent: -99999px;
			border: none;
			width: 41px;
			height: 42px;
			background: transparent url(style/images/search_icon.png) no-repeat scroll;
		}

I used the text-indent to move the text far far away.

But on IE7, it’s still there.

Is there a way to get rid of the text on IE7?

Thank you for reading this :slight_smile:

2

Here’s the URL: http://www.powerful.com.my

3

My question is, why don’t you just set the value to null (value=“”) instead of trying to indent the text “far far away” ?

Like this:

<input id="searchsubmit" type="submit" value="" />

Alex

4

I think it’s not good practice to leave attributes empty. I suggest using the button element like so:

<button type="submit" id="searchsubmit" title="search">Search</button>

And then changing the styles to apply on the button like so:

It will work on IE7

button#searchsubmit {
            cursor: pointer;
            text-indent: -99999px;
            border: none;
            width: 41px;
            height: 42px;
            background: transparent url(style/images/search_icon.png) no-repeat scroll;
        }

:slight_smile:

5

What if images are off and CSS is on? The user will get a blank textbox with no text

6 
<input type="image" src="style/images/search_icon.png" alt="Search" id="searchsubmit">
7

If that were to happen, I guess I’d implement AutisticCuckoo’s suggestion.

Alex

8

As would I :).