CSS Form Sample 4
http://aceinfowayindia.com/blog/2009/06/how-create-good-looking-form-without-table/
by ducka
HTML
<p>
A sexy looking form, but I don't like how each of the fields are wrapped up in a label. I'd much prefer the usage of a div for that.
</p>
<p>
The message text area doesn't resizse properly when you try to manually resize it in firefox. This can be fixed.
</p>
<form>
<div class="box">
<h1>
Contact Form :</h1>
<label>
<span>Full name</span>
<input type="text" class="input_text" name="name" id="name" />
</label>
<label>
<span>Email</span>
<input type="text" class="input_text" name="email" id="email" />
</label>
<label>
<span>Subject</span>
<input type="text" class="input_text" name="subject" id="subject" />
</label>
<label>
<span>Message</span>
<textarea class="message" name="feedback" id="feedback"></textarea>
<input type="button" class="button" value="Submit Form" />
</label>
</div>
</form>
CSS
*
{
margin: 0;
padding: 0;
}
body
{
font: 100% normal Arial, Helvetica, sans-serif;
}
form, input, select, textarea
{
margin: 0;
padding: 0;
color: #ffffff;
}
div.box
{
margin: 0 auto;
width: 500px;
background: #222222;
position: relative;
top: 50px;
border: 1px solid #262626;
}
div.box h1
{
color: #ffffff;
font-size: 18px;
text-transform: uppercase;
padding: 5px 0 50px 50px;
border-bottom: 1px solid #161712;
border-top: 1px solid #161712;
}
div.box label
{
width: 100%;
display: block;
background: #1C1C1C;
border-top: 1px solid #262626;
border-bottom: 1px solid #161712;
padding: 10px 0 10px 0;
}
div.box label span
{
display: block;
color: #bbbbbb;
font-size: 12px;
float: left;
width: 100px;
text-align: right;
padding: 5px 20px 0 0;
}
div.box .input_text
{
padding: 10px 10px;
width: 200px;
background: #262626;
border-bottom: 1px double #171717;
border-top: 1px double #171717;
border-left: 1px double #333333;
border-right: 1px double #333333;
}
div.box .message
{
padding: 7px 7px;
width: 350px;
background: #262626;
border-bottom: 1px double #171717;
border-top: 1px double #171717;
border-left: 1px double #333333;
border-right: 1px double #333333;
overflow: hidden;
...