Input fileds as transparent

HTML & CSS
1

Is there a way to make the background color of an input field 50% transparent that works across modern browsers (IE7 included) that will not also make the text that you type in the field transparent as well?

many thanks,
Houston

2

You need to use opacity for that. Hang on, I’ll post a few reference links. (You may also have to wrap the inputs around spans, give the spans the opacity, and then make the inputs transparent and give them a z-index via relative positioning.)

Edit:

Gah, I can’t find them.

3

That is OK, i appreciate you trying.

Crap

4

Try aadding this to css class defining entry field:

	
       filter: alpha(opacity:40);
	KHTMLOpacity: 0.40;
	MozOpacity: 0.40;
	opacity: 0.40;

Sample shows opacity down to 40%. Modify it to your likings.

Did not read it all … it will get everything transparrent, so it does not answer your question

5 

opacity:.4; /* Firefox/Opera/Safari/Chrome. Basically all the freaking sweet browsers. */ 
-ms-filter:"alpha(opacity=40)"; /* IE8 */ 
filter:alpha(opacity=40); /* IE6/IE7 */

It has to be in that order

6

Thank you, Ryan.
I will surely use that - especially to please MS productions.

In a second answer attempt to initial question of this thread: how to get rid of background in form input fields, without ghosting text in a process.

CSS2:
background: transparent;
It will make background totally transparrent. However text will stay fully opaque.

CSS3:
background-color: rgba(232,55,108,0.15);
Last element: 0.15, allows to adjust opacity.
Text stays opaque.

Please Note: I did not test it in all browsers, so it may not work properly across the board.

7

Hi,

You could use a transparent background png image instead and then the text won’t be affected. That means using the alpha image loader for IE6 though.

Alternatively as Dan said you apply the opacity to an unrelated element (i.e. not parent>child) such as a floated span that is sized to match the input and then you absolutely place the input on top of the span. In this way the text will not be opaque.

Probably easier to use a transparent png like this example :slight_smile: