CSS to hide INPUT BUTTON value text

Question

I am currently styling an  lt input type  button   gt  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

User · Answer

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/

User · Answer

well   font-size  0  line-height  0   work awesome for me

User · Answer

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 · Answer

I had this noted from somewhere   adding text-transform to input to remove it  input button       text-indent -9999px      text-transform capitalize

User · Answer

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 · Answer

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

User · Answer

This following has worked best for me   HTML    lt input type  submit   gt    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  lt input type  submit   gt  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

User · Answer

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 · Answer

color transparent      For FF     padding-left 1000px       FOR IE6 IE7

User · Answer

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 · Answer

Instead  just do a hook form alter and make the button an image button and you are done

User · Answer

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 · Answer

color transparent  and then any text-transform property does the trick too   For example   color  transparent  text-transform  uppercase

User · Answer

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

User · Answer

Write to your CSS file    your button id                color  transparent

User · Answer

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

User · Answer

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

[css] CSS to hide INPUT BUTTON value text

Examples related to css

Examples related to internet-explorer

Examples related to drupal

Examples related to input

Examples related to transparency