<h3 class="sc-sub-title">Style 1</h3> <form action="../mail.php"> <div class="input-box transparent"><input type="text" placeholder="Name*" name="name"></div> <div class="input-box transparent"><input type="text" placeholder="Email*" name="email"></div> <div class="input-box transparent"><input type="text" placeholder="Subject" name="subject"></div> <div class="input-box transparent"><textarea name="message" placeholder="Message"></textarea></div> <div class="input-box submit-box width-full"><input type="submit" class="button large" value="send"></div> </form> <h3 class="sc-sub-title">Style 2</h3> <form action="../mail.php"> <div class="input-box"> <label for="name">Name*</label> <input type="text" name="name" id="name"> </div> <div class="input-box"> <label for="email">Email*</label> <input type="text" name="email" id="email"> </div> <div class="input-box"> <label for="subject">Subject</label> <input type="text" name="subject" id="subject"> </div> <div class="input-box"> <label for="message">Message</label> <textarea name="message" id="message"></textarea> </div> <div class="input-box submit-box width-full"> <input type="submit" class="button large" value="send"> </div> </form>
/* Form Input */ .input-box { float: left; margin-bottom: 18px; width: 100%; } .input-box:last-child { margin-bottom: 0; } .input-box-2 { margin-left: -15px; margin-right: -15px; } .input-box-2 .input-box { display: block; float: left; margin-left: 0; margin-right: 0; padding-left: 15px; padding-right: 15px; width: 50%; } .input-box-2 .input-box:last-child { margin-bottom: 18px; } .input-box label { color: #303030; display: block; font-weight: 500; line-height: 12px; margin-bottom: 10px; text-align: left; } .input-box input, .input-box textarea, .input-box select { background: #fff none repeat scroll 0 0; border: 1px solid #eee; color: #909090; font-size: 12px; font-weight: 300; height: 44px; padding: 5px 12px; text-align: left; width: 100%; } .input-box select { appearance: none; -moz-appearance: none; background: #fff url("img/icon/select-arrow.png") no-repeat scroll right center; font-size: 14px; } .input-box.transparent input, .input-box.transparent textarea , .input-box.transparent select { background-color: transparent; } .input-box textarea { min-height: 106px; } .input-box input:focus, .input-box textarea:focus { color: #303030; } .submit-box { width: auto; } .submit-box input { border: medium none; color: #fff; font-size: 14px; font-weight: 500; line-height: 37px; padding: 0 36px; text-align: center; text-transform: uppercase; width: auto; } .submit-box.width-full { width: 100%; } .submit-box.width-full input { width: 100%; } .submit-box input:hover { background: #303030 none repeat scroll 0 0; color: #fff; }