HTML:
<input class="button" type="button" value="Go">
.. or ..
<button class="button">Go</button>
CSS:
input.button { text-indent: -9000px; text-transform: capitalize; }
Negative-indent alone unfortunately doesn’t work to remove text from a button element in IE7, but add text-transform: capitalize; and presto!
Cheers for that mate! Been looking around for a solution to remove the submit text in ie7, its been a head scratcher!
The text-transform is an odd one to use, but I guess that is ie for you! Thanks again, Mark.
Wow, Chris strikes again.
I used line-height: -9999px for this problem before and it worked.
Bizarrely in IE tester this method is failing me. I hit up google with the search
“remove text on buttons ie”
Who was on the first page of the SERP?
None other :)
Thanks Chris!
hello
I’m using
text-indent: -9000px; text-transform: capitalize;
This works in IE7 but the actual linking area where hands appear is limited. I’ve tried width, but its not working.
Any solution?
…and IE8 too. Good work – thanks!
{font-size: 0px; line-Height: 0px;}
Does the same thing
On the contrary, {font-size: 0px; line-Height: 0px;} leaves a small black line over the button that is the text at an incredibly small size.
The solution posted here by Chris Coyier has been the only thing I have found that works for me. Thanks so much, Chris!
I`m using padding-left for removing the button text. It`s working exactly
AWESOME! Thanks a bunch!
Fantastic! Thanks so much!
you just saved my life :D
You sir, are a mad genius!
that browser is an asshole.
Pure brilliance, I’d say – thanks so much!
Nice fix… thanks a ton!
Nicely played sir! But what if your browser is 9000px wide. Just kidding!
I didn’t find this worked for IE7 (well, IE8 in ‘IE7 mode’); The text-transform didn’t bring the buttons back from off screen.
What did work was NOT using text-indent or text-transform and instead using:
line-height: 100px;
font-size: 0px;
So while the font-size does leave a tiny line of letters on screen in some browsers, that line of offset by the line-height. (Line-height doesn’t seem to work in Firefox, but Firefox seems to respect the font-size of 0. Use a bigger line-height for bigger graphics.)
You should never have font-size: 0px; if you can avoid it as some assistive technologies will ignore this text altogether (and thereby not know what your button is for). Also, the tiny line of letters is an unwanted artefact for a lot of developers/designers.
This just saved me a lot of hassle, thanks!
Huge help! Thanks!
No f’ing way! Thanks so much for posting this solution – IE is less like programming and more like witchcraft!
letter-spacing:9999em; combined with text-indent also works :)
Thanks Ricardo, your suggestion is the only one that worked for me without other affects.
Hah! I don’t know what it is about the text-transform: capitalize; but it worked like a charm. Thanks.
LOL thats just damn weird. nice one.
So, I used this properties:
font-size: 0px;
line-height: 0px
Works fine.
Rennan, I had tried this as well and then noticed my bg image had moved by a pixel in Safari and Firefox on Mac. You may want to check this if your pixel precision matters. :)
I knew I’d find the solution here!.. I’ve been finding stupid ways around this all year.. haha.. Thanks man :)
Thanks for that Chris, Worked a treat!
Thanks for this, it just works, saved me some more ‘parting with hair’
Work’s fine in IE7 & IE8 – thank you Chris!
That’s insane but it works. Thanks for sharing.
About the most amazing hack ever. You, sir, are a legend.
i would rather call this one unrelated fail lol… totally random and still works.
Thank you very much
oh wow. how did you ever figure this out. :P
Thanks
Wow…really. Fixed my IE7 headache. Thank you.
um, watch out for this.. some browsers will actually create a horizontal scroll bar for the distance you text-indent. Not old browsers, either… the first one that comes to mind is Opera 9.8.
Always cross-browser test!
I can’t freaking believe that worked…
Anything other than inherit and none work fine also.
That said, it doesn’t always work. I’m currently battling with a submit button that indents with the text, therefore also disappearing off the page!
It works elsewhere though, so currently trying to locate the difference(s).
I just want to know how the hell you came across this solution.
Genius!
Hi all.
Try to change negative to positive.
Change
text-intend: -9999px;
to
text-intend: 9999px;
looks like it works.
Thanks much, works like a charm :D
Thank you.
Thank you so much for this fix! I was completely baffled as to how to fix this and this worked :)
kings to you! Great solution, big thanks.
I love these snippets! text-transform really, never see that coming :P
what about button {color = transparent>} wouldnt this be enough? ^^
Brilliant! Have been struggling with that problem for 5 years.
how about :
I think this does the same thing
yes yes yes, brilliant it is. Thank you Chris!
funny, i must say that i’ve been doing web and researching all the time on the web, and it’s only been a couple of month that i stumbled upon your site.
And guess what, i just love it. It feels like you’ve been having the same problems as everybody but instead of a site with just theory, you are just sharing your experience with concrete example.
And i just keep on coming back and back and back for more.
Very nice resource site. thanks a lot.
ps: you’re now in my morning RSS reading !
I’m so glad this turned up in a Google Search. Such an easy fix for an irritating problem, thanks!
Just incase it helps anyone. The {font-size: 0px; line-Height: 0px;} is a brilliant solution for email templates when dealing with the iphone 3 and 3s. For some reason it was adding padding at the bottom of header images..
Thanks a lot for this info, i also found that:
input.button{
width:114px;
height:37px;
border: none;
background: transparent url(images/submit_btn.gif) no-repeat center;
overflow: hidden;
text-indent: -999px;
font-size: 0;
display:block;
line-height: 0;
}
Works!
Seems to hide whatever background image you’re using as well. :( Any way around that?
Thanks a lot for sharing this code…. :)
Yet again number one on google for my search, nice one Chris!
Loving these simple CSS Code Snippets… Thx for that one;-)
This is sheer madness!
Truely brilliant! Thanks so much for the fix! How on earth did you figure this one out??
HTML5 boilerplate now uses the following method to hide text, which reportedly works in IE7:
Check out Nicolas Gallagher’s blog post about it
Wierd, but it worked, thanks alot!
This had me scratching my head, and so does the solution to be honest, but if it works, it works. Thanks mate
Also add “overflow: hidden” with text-indent. Should work. Thanks Chris….
Unless I am missing something here, the solution seems easy. Just the input value to an empty string so you don’t have any text to begin with:
<input type=”submit” value=”” />
and presto!
I use this approach in my code.
I have been using this trick for a while. Sometimes it ends up not working, but I definitely like to keep it in a conditional stylesheet. Using color:transparent will usually work for the modern browser. Haven’t tried changing the indent to positive when the button image gets pushed off the page, but I’ll try it out now!
I wouldn’t take the value out of the input if you care about accessibility!
Thanks for all the tips!
Thanks Chris, works great!
Such a non-intuitive solution. This saved me a lot of time.
Did not work for me. but i added it in my css and now working like a charm :)
zoom:expression(
this.runtimeStyle.zoom=1,
this.value=”
);
doesn’t work properly in when we use “go” in lowercase it should be converted into Go by css, but didn’t convert it.
This is a little weird but AWESOME! Thanks :)
Also works for IE Compatibility View in IE 8+, which is on by default for Intranet computers. Thanks!