Grow your CSS skills. Land your dream job.

Last updated on:

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

    • 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!

    • XYZ

      hello

    • 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. AndyiBM
    Permalink to comment#

    …and IE8 too. Good work – thanks!

    • DOM
      Permalink to comment#

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

    • 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. Peter
    Permalink to comment#

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

  4. jmb
    Permalink to comment#

    AWESOME! Thanks a bunch!

  5. ds_sts

    Fantastic! Thanks so much!

  6. reg3n

    you just saved my life :D

  7. You sir, are a mad genius!

  8. lala
    Permalink to comment#

    that browser is an asshole.

  9. Permalink to comment#

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

  10. John
    Permalink to comment#

    Nice fix… thanks a ton!

  11. Regan Shepherd
    Permalink to comment#

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

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

    • 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. Steve
    Permalink to comment#

    This just saved me a lot of hassle, thanks!

  14. Permalink to comment#

    Huge help! Thanks!

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

  16. Ricardo
    Permalink to comment#

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

    • RogerRogers
      Permalink to comment#

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

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

  18. Permalink to comment#

    LOL thats just damn weird. nice one.

  19. Rennan Martini
    Permalink to comment#

    So, I used this properties:

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

    Works fine.

    • 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. 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. Karl Wills
    Permalink to comment#

    Thanks for that Chris, Worked a treat!

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

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

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

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

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

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

    Thanks

  28. Anna
    Permalink to comment#

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

  29. 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. Matt
    Permalink to comment#

    I can’t freaking believe that worked…

  31. 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. Che Taylor
    Permalink to comment#

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

    Genius!

  33. 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. Permalink to comment#

    Thanks much, works like a charm :D

  35. Thapelo_Daison
    Permalink to comment#

    Thank you.

  36. Permalink to comment#

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

  37. Raphael Nieto
    Permalink to comment#

    kings to you! Great solution, big thanks.

  38. Martin
    Permalink to comment#

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

  39. mr new in webdesign
    Permalink to comment#

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

  40. Matt
    Permalink to comment#

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

  41. 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. 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. I’m so glad this turned up in a Google Search. Such an easy fix for an irritating problem, thanks!

  44. 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. 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. Seems to hide whatever background image you’re using as well. :( Any way around that?

  47. Depain k

    Thanks a lot for sharing this code…. :)

  48. Nick
    Permalink to comment#

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

  49. Christian Rolf
    Permalink to comment#

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

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

  51. 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. Anders
    Permalink to comment#

    Wierd, but it worked, thanks alot!

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

  54. Raj
    Permalink to comment#

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

  55. 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. 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. Permalink to comment#

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

  58. 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. 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. mohannad khasawneh
    Permalink to comment#

    This is a little weird but AWESOME! Thanks :)

Leave a Comment

Posting Code

  • Use Markdown, and it will escape the code for you, like `<div class="cool">`.
  • Use triple-backticks for blocks of code.
    ``` 
    <div>
      <h1>multi-line block of code</h1>
      <span>be cool yo.</span>
    </div>
    ```
  • Otherwise, escape your code, like <code>&lt;div class="cool"&gt;</code>. Markdown is just easier though.

Current ye@r *

*May or may not contain any actual "CSS" or "Tricks".