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.)
This question is related to
css
internet-explorer
drupal
input
transparency
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
well:
font-size: 0;
line-height: 0;
work awesome for me!
color:transparent; /* For FF */
*padding-left:1000px ; /* FOR IE6,IE7 */
Instead, just do a hook_form_alter and make the button an image button and you are done!
I had this noted from somewhere:
adding text-transform to input to remove it
input.button {
text-indent:-9999px;
text-transform:capitalize;
}
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.
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;
}
Write to your CSS file:
#your_button_id
{
color: transparent;
}
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;
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/
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;
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/
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;
color:transparent; and then any text-transform property does the trick too.
For example:
color: transparent;
text-transform: uppercase;
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 */
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.
Source: Stackoverflow.com