Making an input value text transparent, is it possible?

Question

I want to make the text value for "Login Now" transparent off of the tag from which I am using the following... <input type="image" value="Login Now">, would I just make a background-color: transparent?

Answer 1

Do you mean you want the text to be transparent on the input button? If so why not just leave the text empty?

In theory you could match the text color to the background color for the input to 'hide' it, but I'm not sure I'd recommend it.

tag:

<input type="image" value="Login Now" id="loginButton"/>

css:

input#loginButton
{
    color:#fff;
    background-color:#fff;
}

Again, not sure why you'd put text in and then make it transparent/hidden?

Answer 2

You could use Firebug in Firefox to find the background color of that input element, then set the style of the element to have that color in the foreground.

i.e. if the background color is white, change your input to

<input type="image" value="Login Now" style="color: #ffffff;">

If you can't change the HTML maybe you could add some javascript to change that. I'm afraid if you just change the stylesheet you'll change the foreground color for every input element to the background color. But if that is what you want, you can certainly do something in your stylesheet like:

input {
    color: white;
}

or add an ID or class and change the style by those... Just make sure the foreground and background are the same color.

Answer 3

value on an <input type="image"> is not normally of use. Browsers are inconsistent about whether the value is submitted as part of the form (making it useless for that purpose), and it should not be rendered as text at all.

It does get rendered as text in Firefox and WebKit, but only because those browsers are using it as fallback content for the alt-text when you have included no alt attribute. This is an non-standard quirk that you should not rely on.

Specifying the text as an alt attribute instead-of-or-in-addition-to value is better and becomes visible in IE and Opera. But it's still highly questionable. It doesn't really make sense to have an <input type="image"> without an actual image src. The HTML4 standard doesn't say what browsers are to do with this. HTML5 says that both src and alt must be present. In any case, IE's rendering of missing images is unlikely to be what you want here.

What is it exactly you are trying to do here? Do you want a pure image button? Then use <input type="image"> with that image in its src. Do you want a textual button? Then use <input type="submit">, potentially styled to remove the borders and change the background.

To answer the question as posed, you can only set background-color and border-color to the transparent value. Other properties such as color (which is what you would need to set text colour) won't accept it. In CSS3 you could use an rgba colour with its alpha channel set to 0, but don't expect support from IE.