Create A CSS Style Form

Create A CSS Style Form

<style>
input {margin:0; padding:0;}
input[type=text], input[type=password], textarea { border:1px solid #e3e3e3; padding:7px; font-size:11px; color:#777; }
input[type=text], input[type=password], textarea, select {
background: #ffffff;
background: -moz-linear-gradient(top, #ffffff 0%, #f4f4f4 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#f4f4f4));
background: -webkit-linear-gradient(top, #ffffff 0%,#f4f4f4 100%);
background: -o-linear-gradient(top, #ffffff 0%,#f4f4f4 100%);
background: -ms-linear-gradient(top, #ffffff 0%,#f4f4f4 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f4f4f4',GradientType=0 );
background: linear-gradient(top, #ffffff 0%,#f4f4f4 100%);
-webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease;
outline:0 none !important;
}
input[type=text].rounded, input[type=password].rounded, textarea.rounded, select.rounded, input[type=submit].rounded, button.rounded {-webkit-border-radius:3px; -moz-border-radius:3px; border-radius:3px;  }
input[type=text]:hover, input[type=password]:hover, textarea:hover { border:1px solid #b4b4b4; }
input[type=text]:focus, input[type=password]:focus, textarea:focus, select:focus { -moz-box-shadow: 0 0 3px #EB540A;-webkit-box-shadow: 0 0 3px #EB540A; box-shadow: 0 0 3px #EB540A; border: 1px solid #EB540A; }
input[type=submit], button {
background:#EB540A; padding: 4px 14px; color:#fff; text-shadow:0 1px 0 rgba(0,0,0,0.5);
text-transform:uppercase; cursor:pointer; border:1px solid #444;
-webkit-box-shadow: 0 2px 6px rgba(255, 255, 255, 0.5) inset;
-moz-box-shadow: 0 2px 6px rgba(255, 255, 255, 0.5) inset; box-shadow: 0 2px 6px rgba(255, 255, 255, 0.5) inset;
}
input[type=submit]:hover, button:hover { -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.4), 0 -2px 6px rgba(255, 255, 255, 0.5) inset; -moz-box-shadow: 0 0 3px rgba(0, 0, 0, 0.4), 0 -2px 6px rgba(255, 255, 255, 0.5) inset; box-shadow: 0 0 3px rgba(0, 0, 0, 0.4), 0 -2px 6px rgba(255, 255, 255, 0.5) inset;}
input[type=submit]:active, button:active {-webkit-box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5) inset; -moz-box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5) inset; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5) inset;}
.rounded-fields input[type=text], .rounded-fields input[type=password], .rounded-fields textarea, .rounded-fields select, .rounded-fields input[type=submit], .rounded-fields button {-webkit-border-radius:3px; -moz-border-radius:3px; border-radius:3px;  }
select {padding:7px; border:1px solid #e3e3e3;}
select:hover { border:1px solid #b4b4b4; }
form > div {margin-bottom:15px;}
form label {color:#454545;}

form.infield > div, form.infield > p {position:relative;}
form.infield label {position:absolute; left:7px; top:5px; font-size:11px; color:#888;}

.form-preset input[type=text], .form-preset input[type=password] {width:240px;}
.form-preset textarea {width:450px;}
</style>


               <h1 class="title">FORM STYLES</h1>
                
                  <form action="#" method="post" class="form-preset">
                   <div>
                           <label for="name2">Text Input (with rounded corners):</label><br>
                           <input type="text" name="name2" class="rounded" id="name2" value="" tabindex="2" />
                      </div>
                      <div>
                           <label for="name">Password Input (with rounded corners):</label><br>
                           <input type="password" name="name2" class="rounded" id="name2" value="tralala" tabindex="2" />
                      </div>
                    
                
                    
                      <div>
                          <label for="select-choice">Select Dropdown Choice (rounded corners):</label><br>
                          <select name="select-choice" id="select-choice" class="rounded">
                              <option value="Choice 1">Choice 1</option>
                              <option value="Choice 2">Choice 2</option>
                              <option value="Choice 3">Choice 3</option>
                          </select>
                      </div>
                    
                    
                      <div>
                          <label for="textarea">Textarea (round corners):</label><br>
                          <textarea cols="40" rows="8" name="textarea" id="textarea" class="rounded">This textarea has .rounded class set to it</textarea>
                      </div>
                   
                      <div>
                       Submit input with .rounded class:<br>
                          <input type="submit" value="Submit" class="rounded" />
                      </div>
                  </form>