CSS for forms

[Bob]

I would like to use CSS to format the text on all the forms on my site but the following doesn't work. Is thwere something I am missing. The rest of the CSS formatting gets applied so it is a problem with this specific element. perhpas this is not possible to make "form" an element.


form {
color : #0000cc;
font : "Times New Roman", Times, serif;
font-size : 12pt;
font-weight : bold;
margin : 0;
padding : 0;
}

Bob

[scoutt]

can you use form? I thought it had to be input.

input {
color : #0000cc;
font : "Times New Roman", Times, serif;
font-size : 12pt;
font-weight : bold;
margin : 0;
padding : 0;
}


form is the first part of any form and doesn't have any text to enter.

[Bob]

Hi Scoutt!

Well I was using this:

form {
margin : 0;
padding : 0;
}

to get rid of the extra spacing around forms

So I just assumed it could handle the rest too but I guess I was wrong. However, The following:

input {
color : #0000cc;
font : "Times New Roman", Times, serif;
font-size : 12pt;
font-weight : bold;
margin : 0;
padding : 0;
}

Only formats the input text. I guess I wasn't clear with my original posting but there are tables and cells inside most of my forms with text inside them describing the text fields, name field, address field etc. This is the text I would like to format. I know I can use CSS on the <TR> or <TD> but that would do all of them in the whole site which I don't want. Any way to format the text inside the tables inside the forms site-wide?

Bob

[scoutt]

ok I see what you are saying. no you can't use the form to make the text change. you will have to make a seperate class in the css for the text inside the tables that are inside the form. also your intentions are good with taking the form spacing out from the form, but it will not work in NS4.xx, that is if you care ;)

so if you have in the css file a td already you could add

td.inside{} or something

[cpradio]

if you didnt want to edit your original you could have done this:

form,input,select,textarea,td {
color : #0000cc;
font : "Times New Roman", Times, serif;
font-size : 12pt;
font-weight : bold;
margin : 0;
padding : 0;
}

[Bob]

Thanks Scoutt!

Oh well. I tried. So that means I will have to insert <TD class=.inside> in each table inside every form on my site. Not too dificult with find and replace but I was hoping I might be able to do something a little more efficient. I giess this will have to do. Thanks again.

Bob

[scoutt]

good one CP, I always forget about doing that.

[Dr. Web]

does the padding remove the spaces? Interesting.... I always use:

<form style="display: inline">

[Bob]

Now look at that! That's three things I have learned tonight. Thanks everybody! Thanks to cpradio this is what I endded up doing.

form,td {
color : #0000cc;
font : "Times New Roman", Times, serif;
font-size : 12pt;
font-weight : bold;
margin : 0;
padding : 0;
}

It works! I didn't know you could do that. So let's see if I got this correct. This way "form,td" means any td inside a form, right? If I have it the other way "td,form" it would mean any form inside a td. Is this correct? And this should be site wide as long as my relative links are ok?

Bob

[cpradio]

Actually "form,td" means to give the following style sheets to both the <td> and the <form> tags located on this page.

Also, if you are using an external style sheet you must make sure you include it on every html page, and likewise if you are just writing the style code inside your pages, it must be on each page you want to have those styles associated with.

-Matt

[Bob]

Oh I see. It seemed to affect only the TD inside a form but I realize now that I have the other text specifically formatted with other CSS properties so the site-wide CSS will not affect them. Still it is cool! Thanks.

BTW anyway to distinguish or separate the submit buttons from the other "input" values. I would like to change the colour and size of the text on the submit buttons but leave the text field input as the default.

Bob

[cpradio]

ya do this:

input.submit {
/*CSS Goes in here*/
}

then add the following to your submit html tags:
class="submit"

So in the end the tag looks like so:
<input type="submit" class="submit" value="Submit">

[scoutt]

yeah bob you can do somehting like this

.submit{font-family: verdana, arial, helvetica, sans-serif;
font-size: 11px;
border-style: solid;
border-width: 1px;
background-color: #ffffff;
color: #000000
}

[cpradio]

Just some clarafication between Scoutt's and my code:

On my code it will only effect input type html tags, because it has input.submit (input signifying what tag it is allowed to be associated with)

So if you used my code and had <td class="submit"> the td tag's css style will not appear like <input type="submit" class="submit">

When using Scoutt's code and with the above examples over the <td> and <input> tags, both will read the css and use them as their properties, because you are not telling the page what tag's are allowed to use that style.

[Bob]

Hey thanks guys! I think I see the light now with this stuff thanks to your help. It's too late now for me to do a lot more but tomorrow morning I will tackle it again and apply some of what I have learned tonight to my whole site. I tried a few things on a couple of apges and I now know how it works so i can do it all tomorrow. Thanks again.

Bob

[steelstickshell]

To format all the <td>s inside a <form>, instead of

form,td { }

you do this:

form td { }

(without the comma)

It's a very interesting trick... If you use nested tables for your site, you can have different formatting styles for 2nd level tables, 3rd level tables, etc.


table {border:2px solid red;}
table table {border:2px solid blue;}
table table table {border:2px solid yellow}

[Bob]

Wow that is cool! I can do so many things with that. I can set up an entire web site before I even build it. Amazing! Thanks for the tip.

Bob