Remove Button Text in IE7

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!

Comments

  1. User Avatar
    Mark
    Permalink to comment#

    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.

    • User Avatar
      Alisatir
      Permalink to comment#

      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!

    • User Avatar
      XYZ

      hello

    • User Avatar
      sn
      Permalink to comment#

      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?

  2. User Avatar
    AndyiBM
    Permalink to comment#

    …and IE8 too. Good work – thanks!

    • User Avatar
      DOM
      Permalink to comment#

      {font-size: 0px; line-Height: 0px;}
      Does the same thing

    • User Avatar
      Anne

      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!

  3. User Avatar
    Peter
    Permalink to comment#

    I`m using padding-left for removing the button text. It`s working exactly

  4. User Avatar
    jmb
    Permalink to comment#

    AWESOME! Thanks a bunch!

  5. User Avatar
    ds_sts

    Fantastic! Thanks so much!

  6. User Avatar
    reg3n

    you just saved my life :D

  7. User Avatar
    Adam Poots

    You sir, are a mad genius!

  8. User Avatar
    lala
    Permalink to comment#

    that browser is an asshole.

  9. User Avatar
    Cat
    Permalink to comment#

    Pure brilliance, I’d say – thanks so much!

  10. User Avatar
    John
    Permalink to comment#

    Nice fix… thanks a ton!

  11. User Avatar
    Regan Shepherd
    Permalink to comment#

    Nicely played sir! But what if your browser is 9000px wide. Just kidding!

  12. User Avatar
    Colin
    Permalink to comment#

    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.)

    • User Avatar
      Lauren O'Donovan
      Permalink to comment#

      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.

  13. User Avatar
    Steve
    Permalink to comment#

    This just saved me a lot of hassle, thanks!

  14. User Avatar
    Adam
    Permalink to comment#

    Huge help! Thanks!

  15. User Avatar
    Lauren O'Donovan
    Permalink to comment#

    No f’ing way! Thanks so much for posting this solution – IE is less like programming and more like witchcraft!

  16. User Avatar
    Ricardo
    Permalink to comment#

    letter-spacing:9999em; combined with text-indent also works :)

    • User Avatar
      RogerRogers
      Permalink to comment#

      Thanks Ricardo, your suggestion is the only one that worked for me without other affects.

  17. User Avatar
    Ivan Junge
    Permalink to comment#

    Hah! I don’t know what it is about the text-transform: capitalize; but it worked like a charm. Thanks.

  18. User Avatar
    nick
    Permalink to comment#

    LOL thats just damn weird. nice one.

  19. User Avatar
    Rennan Martini
    Permalink to comment#

    So, I used this properties:

    font-size: 0px;
    line-height: 0px

    Works fine.

    • User Avatar
      sonia
      Permalink to comment#

      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. :)

  20. User Avatar
    Mike
    Permalink to comment#

    I knew I’d find the solution here!.. I’ve been finding stupid ways around this all year.. haha.. Thanks man :)

  21. User Avatar
    Karl Wills
    Permalink to comment#

    Thanks for that Chris, Worked a treat!

  22. User Avatar
    Ryan Blake
    Permalink to comment#

    Thanks for this, it just works, saved me some more ‘parting with hair’

  23. User Avatar
    Oliver Hutz
    Permalink to comment#

    Work’s fine in IE7 & IE8 – thank you Chris!

  24. User Avatar
    Alex Dunae
    Permalink to comment#

    That’s insane but it works. Thanks for sharing.

  25. User Avatar
    Gemma

    About the most amazing hack ever. You, sir, are a legend.

  26. User Avatar
    Albert

    i would rather call this one unrelated fail lol… totally random and still works.
    Thank you very much

  27. User Avatar
    Kieran
    Permalink to comment#

    oh wow. how did you ever figure this out. :P

    Thanks

  28. User Avatar
    Anna
    Permalink to comment#

    Wow…really. Fixed my IE7 headache. Thank you.

  29. User Avatar
    eric
    Permalink to comment#

    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!

  30. User Avatar
    Matt
    Permalink to comment#

    I can’t freaking believe that worked…

  31. User Avatar
    Ian Devlin
    Permalink to comment#

    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).

  32. User Avatar
    Che Taylor
    Permalink to comment#

    I just want to know how the hell you came across this solution.

    Genius!

  33. User Avatar
    Lev
    Permalink to comment#

    Hi all.
    Try to change negative to positive.

    Change
    text-intend: -9999px;
    to
    text-intend: 9999px;

    looks like it works.

  34. User Avatar
    Foxumon
    Permalink to comment#

    Thanks much, works like a charm :D

  35. User Avatar
    Thapelo_Daison
    Permalink to comment#

    Thank you.

  36. User Avatar
    Debbie
    Permalink to comment#

    Thank you so much for this fix! I was completely baffled as to how to fix this and this worked :)

  37. User Avatar
    Raphael Nieto
    Permalink to comment#

    kings to you! Great solution, big thanks.

  38. User Avatar
    Martin
    Permalink to comment#

    I love these snippets! text-transform really, never see that coming :P

  39. User Avatar
    mr new in webdesign
    Permalink to comment#

    what about button {color = transparent>} wouldnt this be enough? ^^

  40. User Avatar
    Matt
    Permalink to comment#

    Brilliant! Have been struggling with that problem for 5 years.

  41. User Avatar
    Mark Anthony Degamo
    Permalink to comment#

    how about :

    button {
        color : rgba(0,0,0,0);
        color : transparent;
        font-size : 0%;
    }

    I think this does the same thing

  42. User Avatar
    bob
    Permalink to comment#

    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 !

  43. User Avatar
    Mandy Barrington
    Permalink to comment#

    I’m so glad this turned up in a Google Search. Such an easy fix for an irritating problem, thanks!

  44. User Avatar
    Email Marketing Enthusiast
    Permalink to comment#

    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..

  45. User Avatar
    Jimmy
    Permalink to comment#

    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!

  46. User Avatar
    Jon Thomas

    Seems to hide whatever background image you’re using as well. :( Any way around that?

  47. User Avatar
    Depain k

    Thanks a lot for sharing this code…. :)

  48. User Avatar
    Nick
    Permalink to comment#

    Yet again number one on google for my search, nice one Chris!

  49. User Avatar
    Christian Rolf
    Permalink to comment#

    Loving these simple CSS Code Snippets… Thx for that one;-)

  50. User Avatar
    Steffen Schmidt
    Permalink to comment#

    This is sheer madness!
    Truely brilliant! Thanks so much for the fix! How on earth did you figure this one out??

  51. User Avatar
    Mottie
    Permalink to comment#

    HTML5 boilerplate now uses the following method to hide text, which reportedly works in IE7:

    .ir {
        font: 0/0 a;
        text-shadow: none;
        color: transparent;
    }
    

    Check out Nicolas Gallagher’s blog post about it

  52. User Avatar
    Anders
    Permalink to comment#

    Wierd, but it worked, thanks alot!

  53. User Avatar
    Dan Henderson
    Permalink to comment#

    This had me scratching my head, and so does the solution to be honest, but if it works, it works. Thanks mate

  54. User Avatar
    Raj
    Permalink to comment#

    Also add “overflow: hidden” with text-indent. Should work. Thanks Chris….

  55. User Avatar
    Keith
    Permalink to comment#

    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.

  56. User Avatar
    Brad Hutchison
    Permalink to comment#

    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!

  57. User Avatar
    Amy
    Permalink to comment#

    Thanks Chris, works great!
    Such a non-intuitive solution. This saved me a lot of time.

  58. User Avatar
    nmrony
    Permalink to comment#

    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=”
    );

  59. User Avatar
    Pankaj Rana
    Permalink to comment#

    doesn’t work properly in when we use “go” in lowercase it should be converted into Go by css, but didn’t convert it.

  60. User Avatar
    mohannad khasawneh
    Permalink to comment#

    This is a little weird but AWESOME! Thanks :)

  61. User Avatar
    Dan
    Permalink to comment#

    Also works for IE Compatibility View in IE 8+, which is on by default for Intranet computers. Thanks!

Submit a Comment

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag