CSS to hide INPUT BUTTON value text

Question

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

I had the same issue and tried all of the 11 answers, and found out that these hacks (`text-indent`, and `padding-left`) only fix inputs that have a `type="submit"`, so i had to change from `type="image"`. Anyway thanks — adardesign, Jul 15 '10 at 18:07

score 55 · Answer 1 · answered Jun 22 '09 at 11:21

55

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

answered Jun 22 '09 at 11:21

Emily

9,926
4
31
39

score 35 · Answer 2 · edited Dec 18 '10 at 20:24

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;
}

score 21 · Answer 3 · answered Jun 22 '09 at 08:37

21

well:

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

work awesome for me!

answered Jun 22 '09 at 08:37

Stanislav Müller

429
3
9

Nice one! This seems like the least disruptive workaround for IE. – Tobias Cohen Oct 15 '10 at 06:14
haaaa duh how did i not think of this. – nick Jan 07 '15 at 04:50

score 9 · Answer 4 · answered Mar 01 '09 at 20:39

9

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/

answered Mar 01 '09 at 20:39

Ryan Doherty

38,580
4
56
63

yes i tried this and the buttons disappeared .. font-size = 0 still shows a dot – Scott Evernden Mar 01 '09 at 20:48
text-indentation doesn't work in IE 7 and older - whole button gets indented, not only text – zappan Apr 27 '10 at 14:25
1

I had the problem with the dot in the middle of the button with `font-size: 0`, the trick is to add `line-height: 0` as well. – Mick Byrne Dec 06 '12 at 04:36

score 6 · Accepted Answer · answered Mar 01 '09 at 20:33

6

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.

answered Mar 01 '09 at 20:33

Phil.Wheeler

16,748
10
99
155

1

*head smack* -- Alright - this actually works for me .. and I'd already been setting width and height . so tnx ! – Scott Evernden Mar 01 '09 at 20:57
62

It should be noted that this makes the button entirely useless for sight-impaired users. – ceejayoz Mar 01 '09 at 23:16
3

That's actually a very valid point. You could work around this by adding a title and alt attribute to the button, couldn't you? – Phil.Wheeler Mar 01 '09 at 23:28
18

This is very poor for accessibility. You should consider marking a different answer correct. – arxpoetica Nov 30 '10 at 17:28
4

It's also required in an MVC pattern to automatically bring the value of the button through into the controller. If there is a "submit" and "cancel" button on the same form then the value of the button can be used to determine which button was actually clicked. – Brian Scott Mar 07 '11 at 16:56
2

I agree this isn't good for accessibility and it is worth noting that you should use this with caution BUT that was not part of the question. This answer solves the problem effectively. I am willing to bet that most websites being discussed here aren't even internationalized properly for other languages, let alone taking into account screen readers for the sight-impaired. ;) – Jesse Webb Apr 05 '11 at 22:00

score 3 · Answer 6 · edited Feb 10 '15 at 22:16

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;

score 2 · Answer 7 · answered Mar 20 '13 at 13:20

2

I had this noted from somewhere:

adding text-transform to input to remove it

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

answered Mar 20 '13 at 13:20

FLOQ Design

117
9

1

What's the capitalize for? I won't try now but the rest seems a good idea. – Fabio Milheiro Feb 10 '14 at 15:48
1

@Bomboca for some reason it doesn't work without the capitalize on our beloved IE7 – grim May 11 '14 at 09:44
@grim, loool why didn't I think of that? Thanks ;) – Fabio Milheiro May 11 '14 at 17:30

score 2 · Answer 8 · answered Feb 17 '14 at 22:30

2

Write to your CSS file:

#your_button_id 
    {
        color: transparent;
    }

answered Feb 17 '14 at 22:30

Serhii Povísenko

3,352
1
30
48

score 2 · Answer 9 · answered Apr 28 '11 at 08:30

Use conditional statements at the top of the HTML document:

<!--[if lt IE 7 ]> <html lang="en" class="no-js ie6"> <![endif]-->
<!--[if IE 7 ]>    <html lang="en" class="no-js ie7"> <![endif]-->
<!--[if IE 8 ]>    <html lang="en" class="no-js ie8"> <![endif]-->
<!--[if IE 9 ]>    <html lang="en" class="no-js ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html lang="en" class="no-js"> <!--<![endif]-->

Then in the CSS add

.ie7 button { font-size:0;display:block;line-height:0 }

Taken from HTML5 Boilerplate - more specifically paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/

score 2 · Answer 10 · edited Feb 10 '15 at 22:16

2

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.

edited Feb 10 '15 at 22:16

Matt

74,352
26
153
180

answered May 12 '09 at 16:43

score 1 · Answer 11 · edited Dec 18 '10 at 20:22

This works in Firefox 3, Internet Explorer 8, Internet Explorer 8 compatibility mode, Opera, and 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;

score 1 · Answer 12 · answered Sep 28 '09 at 14:21

1

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;

answered Sep 28 '09 at 14:21

Niels

11
1

score 0 · Answer 13 · edited Feb 10 '15 at 22:16

0

Instead, just do a hook_form_alter and make the button an image button and you are done!

edited Feb 10 '15 at 22:16

Matt

74,352
26
153
180

answered Apr 16 '13 at 04:39

Bhavin Joshi

514
3
12

score 0 · Answer 14 · edited Feb 10 '15 at 22:16

This following has worked best for me:

HTML:

<input type="submit"/>

CSS:

input[type=submit] {
    background: url(http://yourURLhere) no-repeat;
    border: 0;
    display: block;
    font-size:0;
    height: 38px;
    width: 171px;
}

If you don't set value on your <input type="submit"/> it will place the default text "Submit" inside your button. SO, just set the font-size: 0; on your submit and then make sure you set a height and width for your input type so that your image will display. DON'T forget media queries for your submit if you need them, for example:

CSS:

@media (min-width:600px) {
  input[type=submit] {
    width:200px;
    height: 44px;
  }
}

This means when the screen is at exactly 600px wide or greater the button will change it's dimensions

score 0 · Answer 15 · edited Feb 10 '15 at 22:14

0

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

edited Feb 10 '15 at 22:14

Matt

74,352
26
153
180

answered May 31 '10 at 10:14

Somu

131
7

score 0 · Answer 16 · edited Feb 10 '15 at 22:13

0

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.

edited Feb 10 '15 at 22:13

Matt

74,352
26
153
180

answered Jan 04 '11 at 09:43

Dave

1,417
14
23

score -1 · Answer 17 · edited Feb 10 '15 at 22:14

-1

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

For example:

color: transparent;
text-transform: uppercase;

edited Feb 10 '15 at 22:14

Matt

74,352
26
153
180

answered Feb 19 '10 at 17:39

rufus2021

54
6

CSS to hide INPUT BUTTON value text

17 Answers17

Linked