CSS to hide INPUT BUTTON value text

Question

I am currently styling an input type='button' element using something like:

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

-the point is i want the button to show as an image, and i want the value-text to NOT display on top of it. This works fine for Firefox as expected. However, on IE6 & IE7 i can still see the text.

I have tried all sorts of tricks to get the text to not display and still no joy. Has anyone got a solution to make IE behave?

(i am constrained to use type=button because this is a drupal form and its form api doesn't support image-type)

Answer 1

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.

Answer 2

Have you tried setting the text-indent property to something like -999em? That's a good way to 'hide' text.

Or you can set the font-size to 0, which would work too.

http://www.productivedreams.com/ie-not-intepreting-text-indent-on-submit-buttons/

Answer 3

I was having the opposite problem (worked in IE, but not FF). For IE, you need to add left padding, and for FF, 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 FF */
    border-style: none;
    border-width: 0;
    padding: 0 0 0 16px !important; /* Fix for IE */
    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;
}

Answer 4

Applying "font-size: 0.1px;" to the button works for me in FF, IE6&IE7, Safari. None of the other solutions I've found worked across all of the browsers.

Answer 5

well:

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

work awesome for me!

Answer 6

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 */

Answer 7

works in FF3, IE 8, IE 8 compatablitiy mode, Opera, Safari

*note table cell containing this has padding:0 and text-align:center



background: none;

background-image: url(../images/image.gif);

background-repeat:no-repeat;

overflow:hidden;

border: NONE;

width: 41px; /*width of image*/

height: 19px; /*height of image*/

font-size: 0;

padding: 0 0 0 41px;

cursor:pointer;

Answer 8

overflow:hidden and padding-left are working fine for me.

For Firefox:

width:12px;
height:20px;
background-image:url(images/arrow.gif);
color:transparent;
overflow:hidden;
border:0;

For the IEs:

padding-left:1000px;

Answer 9

padding-left:1000px; rocks! thanks a lot.

Answer 10

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

so

color: transparent; text-transform: uppercase;

Answer 11

color:transparent; -- For FF
*padding-left:1000px ; --- FOR IE6,IE7

Thanks

Answer 12

Sorry to sound stupid... but how can adding a padding help?