100% Pure CSS Form #2 Tutorial

View Demo

It seems to take me forever to get my forms looking perfect across all browsers. Therfore, I would like to provide a place where we can all come to grab a form and go! Or simply a place to come and get some good ideas in order to jump start your designs. So... here is my second 100% pure css form - many more will surly follow!

The CSS

label, input, textarea {
font-family:inherit;
float:left;
clear:left;
width:250px;
font-weight:bold;
}
label {
cursor:pointer;
}
input {
padding:.2em;
margin-bottom:.2em;
background:#eee;
}
textarea {
height:120px;
margin-bottom:.8em;
overflow:auto;
padding:.2em;
background:#eee;
}
input.submit {
width:5em;
padding:.1em;
}
input:focus, textarea:focus, input:hover, textarea:hover {
background:#C4DCF4;
outline:0;
}

The html

<form method="post" action="">
<div>
<label for="name">Name</label>
<input type="text" id="name" name="name">

<label for="phone">Phone</label>
<input type="text" id="phone" name="phone">

<label for="email">Email</label>
<input type="text" id="email" name="email">

<label for="website">Website</label>
<input type="text" id="website" name="website">

<label for="comments">Comments</label>
<textarea id="comments" name="comments" rows="3" cols="30"></textarea>

<input type="submit" name="submit" value="Submit" class="submit">
</div>
</form>

ADVERTISE HERE