PDA

View Full Version : Different form styling



pfar54
03-04-2015, 03:51 AM
I am constructing multiple forms on a site I am creating. Initially I created a single form and styling for it. Now I am creating a login page and I am making that as a form. Now whenever I add my CSS to this page it obviously formats it as the other form I have.

How do you give different forms different styling? I tried to give it a div id name, but that just took the form styling away.

Any help appreciated.

Thanks

Old Pedant
03-04-2015, 04:27 AM
Trivial. Give each <form> a different id!

Then you can do:

#form1 input.apple { color: red; }

#form37 input.apple { color: green; }

And so on.

No different than you would style the content of <div>s dependent on their id's.

For that matter, if you wrapped each <form> in a <div>, then you could just give each <div> a different id:

<div id="zam">
<form>
<input class="zamboni">
</form>
</div>
<div id="boni">
<form>
<input class="zamboni">
</form>
</div>

and then

<style>
#zam .zamboni { color: red; }

#boni .zamdoni { color: green; }
</style>

pfar54
03-04-2015, 01:40 PM
Trivial. Give each <form> a different id!

Then you can do:

#form1 input.apple { color: red; }

#form37 input.apple { color: green; }

And so on.

No different than you would style the content of <div>s dependent on their id's.

For that matter, if you wrapped each <form> in a <div>, then you could just give each <div> a different id:

<div id="zam">
<form>
<input class="zamboni">
</form>
</div>
<div id="boni">
<form>
<input class="zamboni">
</form>
</div>

and then

<style>
#zam .zamboni { color: red; }

#boni .zamdoni { color: green; }
</style>


I appreciate it very much. I had a feeling it was going to be extremely easy, so easy that when I was searching I couldn't find anything.

Thanks!