CSS to hide INPUT BUTTON value text

Scott_Evernden_11397 0
Viewed 139032

I am currently styling an <input type='button'/> element with the following CSS:

background: transparent url(someimage);
color: transparent;

I want the button to show as an image, but I don't want the value text to display on top of it. This works fine for Firefox as expected. However, on Internet Explorer 6 and Internet Explorer 7 I can still see the text.

I have tried all sorts of tricks to hide the text, but without success. Is there a solution to make Internet Explorer behave?

(I am constrained to use type=button because this is a Drupal form and its form API doesn't support image-type.)

drupal internet-explorer transparency input css
17 Answers

I use

button {text-indent:-9999px;}
* html button{font-size:0;display:block;line-height:0}  /* ie6 */
*+html button{font-size:0;display:block;line-height:0}  /* ie7 */
user_1102020

I had the opposite problem (worked in Internet Explorer, but not in Firefox). For Internet Explorer, you need to add left padding, and for Firefox, you need to add transparent color. So here is our combined solution for a 16px x 16px icon button:

input.iconButton
{
    font-size: 1em;
    color: transparent; /* Fix for Firefox */
    border-style: none;
    border-width: 0;
    padding: 0 0 0 16px !important; /* Fix for Internet Explorer */
    text-align: left;
    width: 16px;
    height: 16px;
    line-height: 1 !important;
    background: transparent url(../images/button.gif) no-repeat scroll 0 0;
    overflow: hidden;
    cursor: pointer;
}
user_868950

well:

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

work awesome for me!

user_1267840
user_9560

Why are you including the value attribute at all? From memory, you don't need to specify it (although HTML standards may say you do - not sure). If you do need a value attribute, why not just state value=""?

If you do take this approach, your CSS will need additional properties for the height and width of the background image.

user_156090

The difference some of you are seeing in solutions that work or not in the different IEs may be due to having compatibility mode on or off. In IE8, text-indent works just fine unless compatibility mode is turned on. If compatibility mode is on, then font-size and line-height do the trick but can mess up Firefox's display.

So we can use a css hack to let firefox ignore our ie rule.. like so...

text-indent:-9999px;
*font-size: 0px; line-height: 0;
user_1262540

Applying font-size: 0.1px; to the button works for me in Firefox, Internet Explorer 6, Internet Explorer 7, and Safari. None of the other solutions I've found worked across all of the browsers.

Admin1

I had the very same problem. And as many other posts reported: the padding trick only works for IE.

font-size:0px still shows some small dots.

The only thing that worked for me is doing the opposite

font-size:999px

... but I only had buttons of 25x25 pixels.

user_4677640

color:transparent; and then any text-transform property does the trick too.

For example:

color: transparent;
text-transform: uppercase;
user_2190100
Related