CSS3 Form Sample 3

http://woork.blogspot.com/2008/06/clean-and-pure-css-form-design.html

by ducka

HTML

<p>
   The sucky thing about this form is that it doesn't resize well.  The layout of the inputs and labels rely completely on the width of the entire form. There are no divs wrapping each of the fields.
</p>
<br />
<div id="stylized" class="myform">
  <form id="form" name="form" method="post" action="index.html">
  <h1>Sign-up form</h1>
   <p>This is the basic look of my form without table</p>
 
     <label>Name
 <span class="small">Add your name</span>
   </label>
 <input type="text" name="name" id="name" />
 
 <label>Email
 <span class="small">Add a valid address</span>
   </label>
 <input type="text" name="email" id="email" />
 
  <label>Password
 <span class="small">Min. size 6 chars</span>
   </label>
 <input type="text" name="password" id="password" />
 
     <button  type="submit">Sign-up</button>
 <div class="spacer"></div>
 
   </form>
 </div>

CSS

body{
   font-family:"Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif;
   font-size:12px;
 }
 p, h1, form, button{border:0; margin:0; padding:0;}
 .spacer{clear:both; height:1px;}
 /* ----------- My Form ----------- */
 .myform{
   margin:0 auto;
   width:400px;
   padding:14px;
 }
 
   /* ----------- stylized ----------- */
   #stylized{
       border:solid 2px #b7ddf2;
       background:#ebf4fb;
   }
   #stylized h1 {
       font-size:14px;
       font-weight:bold;
       margin-bottom:8px;
   }
   #stylized p{
       font-size:11px;
       color:#666666;
       margin-bottom:20px;
       border-bottom:solid 1px #b7ddf2;
       padding-bottom:10px;
   }
   #stylized label{
       display:block;
       font-weight:bold;
       text-align:right;
       width:140px;
       float:left;
   }
   #stylized .small{
       color:#666666;
 display:block;
       font-size:11px;
       font-weight:normal;
       text-align:right;
       width:140px;
   }
   #stylized input{
       float:left;
       font-size:12px;
       padding:4px 2px;
       border:solid 1px #aacfe4;
       width:200px;
       margin:2px 0 20px 10px;
   }
   #stylized button{
       clear:both;
       margin-left:150px;
       width:125px;
       height:31px;
       background:#666666 url(img/button.png) no-repeat;
       text-align:center;
       line-height:31px;
       color:#FFFFFF;
       font-size:11px;
       font-weight:bold;
   }