milov.nl: forum

milov.nl : forum : coding : 'transparent input form fields?'

transparent input form fields?	huphtur, 020620 03:45
is it possible to make form fields transparent? ive never seen that done before. looked in some css resources, could only find background color and image.
216.103.149.130

Re: transparent input form fields?	milov, 020620 08:42
umm... <input type="text" style="background-color:transparent;" /> er... <input type="text" style="filter:Alpha(opacity=50);" />
kf-nawij-tg01-0275.dial.kabelfoon.nl

Re: transparent input form fields?	huphtur, 020620 20:42
werd thanxz milov.
216.103.149.130

Re: transparent input form fields?	basho.com,erik,ew, 020625 23:00
it seems like the transprarent style attribute isn't recognized by IE - at least not on IE5MAC. any crossbrowser workaround?
adsl-64-170-112-116.dsl.snfc21.pacbell.net

Re: transparent input form fields?	milov, 020626 08:00
you could use style="background-color:#same_as_container"
kf-nawij-tg01-0275.dial.kabelfoon.nl

Re: transparent input form fields?	basho.com,erik,ew, 020626 10:31
i'm using a background image. check http://www.basho.com/indexed.html and click the face-with-sunglasses-icon (low left) to see what i mean. i'm cool with how it works now. IE transparency would be a bonus... no other way that you can think of?
adsl-64-170-112-116.dsl.snfc21.pacbell.net

Re: transparent input form fields?	Jan!, 020826 00:01
You can give your input element and body the same fixed bg-image. Then it should work. At least in mozilla. :-) body, input.my1337input { background: url("1337image.png") fixed; }
ncgent03.telenet-ops.be

Re: transparent input form fields?	save9.com,darren,daz, 031125 15:15
Heres the easiest way :- <textarea style="FILTER: alpha(opacity=50); WIDTH: 170px; HEIGHT: 65px" tabindex=17 name=Subject rows=3></textarea> Not sure hwo it works with other form elements but try it out. did the trick for me :)
no-dns-yet.demon.co.uk

Re: transparent input form fields?	ACJ, 031128 22:22
"<textarea style="FILTER: alpha(opacity=50); WIDTH: 170px; HEIGHT: 65px" tabindex=17 name=Subject rows=3></textarea>" Yes, that works... for IE 5 and up only (it's an ActiveX hack). Using a semi-transparent PNG image for the background is the "standards" way to go. This, however, is not properly supported by IE (unless you install a PNG fix plug-in), but it does for webstandards compliant browser, and will do so for future browsers. You could also go as far as to make it work for both IE as Gecko based browsers by presenting the standards compliant in a way that is ignored by IE. textarea { background: transparent url(non-transparent.png) repeat; filter: alpha(opacity=50) } * > textarea { background: transparent url(transparent.png) repeat } That should do the trick. HTH, ACJ
ip3e834e71.speed.planet.nl

Re: transparent input form fields?

ACJ, 031128 22:22

"<textarea style="FILTER: alpha(opacity=50); WIDTH: 170px; HEIGHT: 65px" tabindex=17 name=Subject rows=3></textarea>"

Yes, that works... for IE 5 and up only (it's an ActiveX hack).
Using a semi-transparent PNG image for the background is the "standards" way to go. This, however, is not properly supported by IE (unless you install a PNG fix plug-in), but it does for webstandards compliant browser, and will do so for future browsers.

You could also go as far as to make it work for both IE as Gecko based browsers by presenting the standards compliant in a way that is ignored by IE.



textarea {

    background: transparent url(non-transparent.png) repeat;

    filter: alpha(opacity=50)

}



* > textarea {

    background: transparent url(transparent.png) repeat

}

That should do the trick.

HTH,

ACJ

ip3e834e71.speed.planet.nl

Re: transparent input form fields?	ACJ, 031128 22:39
I wrote my previous comment by heart, and I just wanted to know if I wasn't giving false information, so I decided to put up a test page. Copy the URL below and paste it in the address of your webbrowser. I tested it in Internet Explorer 6 and Mozilla 1.6a, and it did exactly what I expected (which is always a nice thing). http://home.planet.nl/~acjbizar/tests/transparent-textarea.html
ip3e834e71.speed.planet.nl

Re: transparent input form fields?	James, 031128 23:39
Good stuff, Acj.
adsl-64-219-120-161.dsl.bumttx.swbell.net

Re: transparent input form fields?	theo, 031129 05:55
nice
CPE-138-130-211-105.qld.bigpond.net.au

Re: transparent input form fields?	ACJ, 031129 06:24
Er... I have no friggin' idea how I could have read "textarea" where it says "input form fields". I know I'm dyslexic, but that's insane. Oh well, it doesn't really matter... it works anyway.
ip3e834e71.speed.planet.nl

Re: transparent input form fields?	Anne, 031129 16:31
Why aren't we using -moz-opacity,opacity and -khtml-opacity to do the trick?
ip3e83e02a.speed.planet.nl

Re: transparent input form fields?	ACJ, 031129 17:09
"Why aren't we using -moz-opacity,opacity and -khtml-opacity to do the trick?" Because the browsers that understand that method (which is a hack) also understand the standard compliant way. I prefer a standards compliant way over a hack when both methods work. That, and there are more browsers that understand the PNG method that the opacity hacks, as far as I know. There is one catch, though. Using the standard compliant menthod only makes the background transparent. Not the borders or included text. I happen to prefer the fact that the typography is not touched by this eyecandy effect... it makes the text easier to read. If you want to get the exact same result in Gecko browsers as the effect that the ActiveX alpha filter generates in IE, you're probably better off using Anne's method. HTH, ACJ
ip3e834e71.speed.planet.nl

Re: transparent input form fields?

ACJ, 031129 17:09

"Why aren't we using -moz-opacity,opacity and -khtml-opacity to do the trick?"

Because the browsers that understand that method (which is a hack) also understand the standard compliant way. I prefer a standards compliant way over a hack when both methods work.
That, and there are more browsers that understand the PNG method that the opacity hacks, as far as I know.

There is one catch, though.
Using the standard compliant menthod only makes the background transparent. Not the borders or included text.
I happen to prefer the fact that the typography is not touched by this eyecandy effect... it makes the text easier to read.
If you want to get the exact same result in Gecko browsers as the effect that the ActiveX alpha filter generates in IE, you're probably better off using Anne's method.

HTH,

ACJ

ip3e834e71.speed.planet.nl

Re: transparent input form fields?	[empty], 040223 05:20
[empty]
216-80-117-122.c3-0.grn-ubr1.chi-grn.il.cable.rcn.com

Pages: 1