100% Pure CSS Form #1 Tutorial
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>
