html
1
2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<form>
<ul class="form-style-1"> <li><label>Full Name <span class="required">*</span></label><input type="text" name="field1" class="field-divided" placeholder="First" /> <input type="text" name="field2" class="field-divided" placeholder="Last" /></li> <li> <label>Email <span class="required">*</span></label> <input type="email" name="field3" class="field-long" /> </li> <li> <label>Subject</label> <select name="field4" class="field-select"> <option value="Advertise">Advertise</option> <option value="Partnership">Partnership</option> <option value="General Question">General</option> </select> </li> <li> <label>Your Message <span class="required">*</span></label> <textarea name="field5" id="field5" class="field-long field-textarea"></textarea> </li> <li> <input type="submit" value="Submit" /> </li> </ul> </form> |
css
1
2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 |
<style type="text/css">
.form-style-1 { margin:10px auto; max-width: 400px; padding: 20px 12px 10px 20px; font: 13px "Lucida Sans Unicode", "Lucida Grande", sans-serif; } .form-style-1 li { padding: 0; display: block; list-style: none; margin: 10px 0 0 0; } .form-style-1 label{ margin:0 0 3px 0; padding:0px; display:block; font-weight: bold; } .form-style-1 input[type=text], .form-style-1 input[type=date], .form-style-1 input[type=datetime], .form-style-1 input[type=number], .form-style-1 input[type=search], .form-style-1 input[type=time], .form-style-1 input[type=url], .form-style-1 input[type=email], textarea, select{ box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; border:1px solid #BEBEBE; padding: 7px; margin:0px; -webkit-transition: all 0.30s ease-in-out; -moz-transition: all 0.30s ease-in-out; -ms-transition: all 0.30s ease-in-out; -o-transition: all 0.30s ease-in-out; outline: none; } .form-style-1 input[type=text]:focus, .form-style-1 input[type=date]:focus, .form-style-1 input[type=datetime]:focus, .form-style-1 input[type=number]:focus, .form-style-1 input[type=search]:focus, .form-style-1 input[type=time]:focus, .form-style-1 input[type=url]:focus, .form-style-1 input[type=email]:focus, .form-style-1 textarea:focus, .form-style-1 select:focus{ -moz-box-shadow: 0 0 8px #88D5E9; -webkit-box-shadow: 0 0 8px #88D5E9; box-shadow: 0 0 8px #88D5E9; border: 1px solid #88D5E9; } .form-style-1 .field-divided{ width: 49%; } .form-style-1 .field-long{ width: 100%; } .form-style-1 .field-select{ width: 100%; } .form-style-1 .field-textarea{ height: 100px; } .form-style-1 input[type=submit], .form-style-1 input[type=button]{ background: #4B99AD; padding: 8px 15px 8px 15px; border: none; color: #fff; } .form-style-1 input[type=submit]:hover, .form-style-1 input[type=button]:hover{ background: #4691A4; box-shadow:none; -moz-box-shadow:none; -webkit-box-shadow:none; } .form-style-1 .required{ color:red; } </style> |
Tags:
html