CSS to hide INPUT BUTTON value text

css internet-explorer drupal input transparency
Scott Evernden picture Scott Evernden · Mar 1, 2009 · Viewed 133.5k times · Source

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

Answer

Emily picture Emily · Jun 22, 2009

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

Related questions

Hide scroll bar, but while still being able to scroll

I want to be able to scroll through the whole page, but without the scrollbar being shown. In Google Chrome it's: ::-webkit-scrollbar { display: none; } But Mozilla Firefox and Internet Explorer don't seem to work like that. I also tried this …

Read More
Support for "border-radius" in IE

Does anyone know if/when Internet Explorer will support the "border-radius" CSS attribute?

Read More
Apply style ONLY on IE

Here is my block of CSS: .actual-form table { padding: 5px 0 15px 15px; margin: 0 0 30px 0; display: block; width: 100%; background: #f9f9f9; border-top: 1px solid #d0d0d0; border-bottom: 1px solid #d0d0d0; } I only want IE 7, 8, and 9 to "see" …

Read More