CLEANFORM

Forms can be greatly enhanced with a touch of CSS, making them more usable and far more visually attractive. No images were used in Clean Form, everything is styled using just CSS.

by secretgspot

HTML

<head>
<!-- Throw in a nice looking font just for the fun of it -->
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:400,700,300,200"/>
</head>

<h1>Clean<span>Form</span> <span class="quip">By Jennifer Perrin</span></h1>
<p>Forms can be greatly enhanced with a touch of CSS, making them more usable and far more visually attractive.<br />No images were used in <span>CLEAN</span>FORM, everything is styled using just CSS.</p>

<div class="formentry">
    <p class="req">All fields are required unless noted.</p>
    <div class="form">
        <div id="firstName" style="width:100%">
            <label for="txtFirstName">First Name</label>
            <input name="txtFirstName" type="text" maxlength="60" id="" class="text" />
        </div>
        
        <div id="lastName" style="width:100%">
            <label for="txtLastName">Last Name</label>
            <input name="txtLastName" type="text" maxlength="60" id="" class="text" />
        </div>
        
        <div id="confirmEmail" style="width:100%">
            <label for="txtEmail">Email</label>
            <input name="txtEmail" type="text" maxlength="255" id="" class="text long" />
        </div>
        
        <div id="zipCode" style="width:75%">
            <label for="txtPrimaryPhone">Phone</label>
            <input name="txtPrimaryPhone" type="text" maxlength="14" id="" class="text" />
        </div>

        <div id="ext" style="width:25%">
            <label for="txtPhoneExtension">Ext. <span>(optional)</span></label>
            <input name="PhoneExtension" type="text" maxlength="4" id="" class="text ext" />
        </div>

        <div id="comments_long" style="width:100%">
            <label for="txtComments">Comments</label>
            <textarea name="txtComments" rows="2" cols="20" id="" class="text"></textarea>
        </div>
        
        <div id="formSubmit" style="width:100%">
            <input type="button" value="Submit the Form!"...

CSS

/* 
 * CLEANFORM by Jennifer Perrin
 * http://www.jenniferperrin.com/blog
 */

/* ------ PAGE ELEMENTS ------ */
body {width:600px; font-family: 'Yanone Kaffeesatz';}
h1 {
    padding: 10px 21px 0 21px;
    color: #5a7c87;
    margin: 0 0 15px;
    font-size: 40px;
    letter-spacing: 3px;
    text-transform: uppercase;
}

h1 span {
    color: #444;
}

h1 span.quip {
    color: #d46a15;
    font-size: 20px;
    letter-spacing: 1px;
}

p { 
    margin: 0 0 0 21px;
    font-size: 16px; 
    color: #444444; 
    width: auto; 
    clear: left;
}

p span {
    color: #5a7c87;
}

a {    
    text-decoration:none !important;
    color: #5a7c87;
}

a:hover {
    text-decoration:underline;
    color: #d46a15;
}

/* ------ FORM ELEMENTS ------ */
p.req { 
    margin: 0; 
    text-align: right; 
    font-size: 14px; 
    color: #d46a15; 
    width: auto; 
    clear: left;
}

div.formentry { 
    padding: 10px 21px 21px 21px; 
    position: relative; 
    overflow: hidden;
}

div.formentry div.form {
    margin: 4px auto 10px auto; 
    padding: 5px; 
    background: #dfdfdf; 
    border: 1px solid #fff; 
    clear: both; 
    position: relative;
    }
    
div.formentry div.form div {
    width: 100%; 
    padding-left: 0; 
    font-size: 14px;  
    overflow: hidden; 
    font-family: courier; 
    color: #999; 
    padding: 0; 
    position: relative; 
    float: left; 
    margin-bottom: 1px; 
}

div.form label { 
    position: absolute; 
    z-index: 10; 
    top: 3px; 
    left: 5px; 
    font-family: 'Yanone Kaffeesatz'; 
    text-transform: uppercase; 
    letter-spacing: 0.5px; 
    color: #5a7c87; 
    font-size: 12px;
}

div.form label span{
    color: #bababa;
    text-transform: none;
    font-style: italic;
    font-family: Arial;
    font-size: 10px;
} 

div.form input {
    border: 0; 
    font-size: 14px; 
    font-family: courier; 
    width: 100%; 
    margin: 0; 
    padding: 19px 0 7px 20px; 
    position: relative; 
    background-color: #fff;
   ...