Form Layouts?

[deric.cain]

i'm having a problem with some simple forms that i have on my web site. the text boxes are white, so it's hard to tell that you can enter in a quantity. i need to put an inset border around it and maybe shade the background color. the only problem is, is that i have like 80 forms and i don't want to apply a class selector to each individual one of them. so how could i apply it to all text box objects and just text box objects? here's the code.

<div id="welcome">
<p style="margin: 0;">&nbsp;</p>
<h2 align="center" class="title style4"><span class="style22">Astro Pneumatic&trade; 1/4in. 90 Degree Angle Die Grinder</span></h2>
<table class="sample" width="375" border="1" align="center" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
<tr>
<th width="352" scope="col"><p align="center" class="title style4"><img src="../images/doba images/auto and tools/AST1240.jpg" alt="" width="200" height="200" /></p>
<p><b>Features and Benefits:</b><ul><li class="style18">Composite handle reduces vibration</li><li class="style18">Rib textured handle provides a firm grip</li><li class="style18">Lever throttle for feathering control</li><li class="style18"> Compact and lightweight</li><li class="style18"> Built-in regulator</li><li class="style18">Front exhaust </li>
</ul>
</li>
</ul>
<form method=post action="http://www.cart32hostingred.com/cgi-bin/cart32.exe/udon'tneedtoknowthisinfohere-AddItem">
<input type=hidden name="item" value="1/4in. 90 Degree Angle Die Grinder">
Qty:
<input type=text name="Qty" value="1" size=3>
<b>Price:<span class="style23"> $<span class="style24">82.95</span></span></b>
<input type=hidden name="Price" value="82.95">
<input type=hidden name="PartNo" value="DOBA147057">
<input type=hidden name="Weight" value="1">
<br>
<br>
<input type=submit value="Add to Shopping Cart">
</form>
</p>
<p align="center" class="style18">ITEM# 147057</p> </th>
</tr>
</table>
<p align="center" class="title style4">&nbsp;</p>
<p align="center" class="title style4">&nbsp;</p>
</div>

that in the red is the actual form. in blue is where i would have to apply the class that i've come up with. how do i do that in my main CSS page and not an inline class.

[chasery]

Well your issue here is that both your submit button is an <input> as well as your text fields. So if you make a general style for say <div id="lol"> and all of the <inputs> within, it will obviously style all of the inputs. If you don't mind the button being styled, than all you would do is:


#lol input {
background-color:...;
border:...;
}

You could then create a class for the button where you say:


.submitbox {
background-color: none;
border: none;
}

As for the length of the box. You need to create a separate class for that. Some one please correct me if there is a better way of doing the actual character length of the box. I tried it personally a few weeks ago and just leaving a number in there didn't effect the length of the input box.


.enormouslylargebox {
width: 1000000px;
}

[deric.cain]

you've just saved me lots of time. thank you so much for your help!!!

[Medyman]

You could then create a class for the button where you say:

or just target only text inputs:


#lol input[type='text']

[chasery]

My personal experience was that the CSS did not validate when I used that. So I created another class. I might have just implemented it incorrectly though.