Borderless boxes in a FORM

[dutchy_gbg]

Hi there.

I am working on a Form, where i want to use images as the background, not the usual boring textboxes.
But can anyone help me to make the inputboxes transparant, and borderfree?
I have found the way to insert images in the boxes, but that still doesnt look like the way i want it.
I mae a screenshot type ot thing om my web, which will explain it better:

http://www.stuki.se/form.jpg

I hope someone can help me!

GreetZ

Stu

[Bill Heffner]

I haven't tried it, but the "style" atribute can do a lot of things.
I would try:
<input type="text" name="whatever" style="border:0; background-color:#CCFF9A">

[JPnyc]

Those aren't borders you're seeing, that's how text boxes look in HTML. The only ways to make it look the way you want are to use flash for it, or unbelievably complex javascripting. In either case, I doubt it would be worth your while to do.

[dutchy_gbg]

I tried the style="border:0; background-color:#CCFF9A" and it works!

:D
i tried a few styles before, but couldn't get it to work, so i had allready given upp upon style, but Bill, you saved my day!

Hope that you can answer med this aswell:

How do i make the inputbox Font to Univers Condensed, now the form is using 2 different font, also How can i make the font smaller (8pt instead of 10pt)

Best regards!

Stu from Sweden

[Bill Heffner]

You can do that in the style tag as well.

style="border:0; background-color:#CCFF9A; font-face:Univers Condensed; font-size:8px"

Make sure of th font name spelling though, and you may have to add single quotes around it if the name has spaces in it.

[dutchy_gbg]

Back again.

thanks for all the tips, i got the font size down to 9pt, but i am not having any luck with the fonttype
I want it to be arial, i coded it as following:

<input type=text class="skugga1" style="border:0; background-color:#CCFF9A; font-face:Arial; font-size:9px" name="Namn" size="20" value="Namn"></span></font><br>
<input type=text class="skugga1" style="border:0; background-color:#CCFF9A; font-face:Arial; font-size:9px" name="Email" size="20" value="Email"><br>
<input type=text class="skugga1" style="border:0; background-color:#CCFF9A; font-face:Arial; font-size:9px" name="Tele" size="20" value="Tele"><br>
<textarea rows="4" class="skugga1" style="border:0; background-color:#CCFF9A; font-face:Arial; font-size:9px" name="Medelande" cols="20">Medelande..</textarea>

But it is still 2 different fonts.

http://www.bartender.se/ny/frames/ileft.htm = direct link to page
http://www.bartender.se/ny/ = link to mainpage

Hope that someone has an solution.

Best regards

Stu from sweden

[Bill Heffner]

Textareas are not as intimately bound to their content as are inputs. Agian, I'm not sure it'll work, but try this:

<textarea rows="4" class="skugga1" style="border:0; background-color:#CCFF9A" name="Medelande" cols="20"><span style="font-face:Arial; font-size:9px">Medelande..</span></textarea>

[dutchy_gbg]

Hi Bill.
It didn't work unfortunatly. some of the html code is now inside the messagebox.
My knowledge of style is very limited, i am trying to learn, but it is goin slow.

I hope you have som more tricks up your sleeve.

Best regards

Stu

[Train]

Just remember, you can dictate all you want, but in some browsers/ browser set ups it just will not work.

[dutchy_gbg]

Jepp, you got that right, some of my sites look good in IE6, but crappy in FF or Safari.

Anyone know how to get the Background to "watermark" in FF?
Or change color in scrollists in FF?

[Train]

How do I have a fixed background image or watermark?

http://webdesign.about.com/od/faqsandhelp/f/bl_faq5_2a.htm

Maybe that will help.

I googled this Background to "watermark"
and that was the first link, maybe one of the others will be better.
http://www.google.com/search?hl=en&q=Background+to+%22watermark%22&btnG=Google+Search

[JPnyc]

Use the font shorthand;

font: normal 9pt arial;