CSS – Remove Button Text In Internet Explorer

We can remove the text on a HTML button by adding the text-indent css attribute on the button class. but this does not work in Internet Explorer 7.

Luckily, i have found a very simple way to solve the problem. Thanks Chris @ Remove Button Text in IE7. This is by adding the text-transform: capitalize in the css class.

.button {
  text-indent: -9999px;
  text-transform: capitalize;
}

 

Here is an example.

<html>
  <head>
    <style type="text/css">
      .button {
        text-indent: -9999px;
        text-transform: capitalize;
      }
    </style>
  </head>
  <body>
    <input class="text" type="text" />
    <input class="button" type="submit" value="go" />
  </body>
<html>

 

Done =)

Reference: Remove Button Text in IE7

Update @ 2011-09-12: You may need to use margin-left to show the button. ie.

.ie7 .button {
  margin-left: 9999px;
  text-indent: -9999px;
  text-transform: capitalize;
}
About these ads

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s