Picnic Website Code Tutorials

100% Pure CSS Form #1 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 first 100% pure css form - many more will surly follow!

The CSS

form {
margin:50px;
width:620px;
overflow:hidden;
}
input, textarea, label {
font-size:1.4em;
font-family:inherit;
}
label, input {
width:300px;
float:left;
margin:0 0 1em;
}
textarea {
width:300px;
height:140px;
float:left;
margin:0 0 1em;
overflow:auto;
}
label {
text-align:right;
width:150px;
padding:0 20px 0 0;
cursor:pointer;
}
input.submit {
width:5em;
padding:.1em;
margin:0 0 0 171px;
font-weight:bold;
cursor:pointer;
}
input, textarea {
background:#D5EAFF;
}
input:hover, textarea:hover, input:focus, textarea:focus {
background:#79BCFF;
outline:0;
}
		

The html

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

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

<label for="subject">Subject:</label>
<input type="text" id="subject" name="subject">

<label for="comments">Comments:</label>
<textarea id="comments" name="comments" rows="1" cols="1"></textarea>

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

Need help adding this or other code to your website? Post it here in the forum! Forum

Sponsors

Top Donators

Friends of Mine