html - using the form element to style search bar & contact form -

how style form element individually search bar & contact form using both on website , both use form element in html. example, see below. suggestions

for search bar on website

<form>     <input type="text" class="search rounded" placeholder="search..."> </form>  form { width:500px; float: right; margin-top: 15px; margin-right: -180px; } .search { padding:6px 15px 6px 40px; margin:3px;  background: url('http://localhost/wordpress3/wp-content/uploads/2015/05   /search-icon.png') no-repeat 8px 6px;  }  .rounded { border-radius:15px;  -moz-border-radius:15px;  -webkit-border-radius:15px;  width:188px; height: 25px; border: 1px solid #999999; }  input[type=text]{ color:#000; } 

for contact form on website

<form> <ul class="form-style"> <li><label>full name <span class="required">*</span> (required)</label>   <input type="text" name="field1" class="field-divided"   placeholder="first" />&nbsp;<input type="text" name="field2"  class="field-divided" placeholder="last" /></li> <li> <label>email <span class="required">*</span> (required)</label> <input type="email" name="field3" class="field-long" /> </li> <li> <label>your message <span class="required">*</span> (required)   </label> <textarea name="field5" id="field5" class="field-long field-  textarea"></textarea> </li> <li> <input type="submit" value="submit" /> or press enter </li> </ul> </form>  .form-style{ margin-left:45px; max-width: 400px; padding: 20px 12px 10px 5px; font: 13px "open sans", sans-serif; } .form-style li { padding: 0; display: block; list-style: none; margin: 20px 0 0 0; } .form-style label{ margin:0 0 3px 0; padding:0px; display:block; font-weight: bold; } .form-style input[type=text], .form-style input[type=date], .form-style input[type=datetime], .form-style input[type=number], .form-style input[type=search], .form-style input[type=time], .form-style input[type=url], .form-style 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: 0.30s ease-in-out; -moz-transition: 0.30s ease-in-out; -ms-transition: 0.30s ease-in-out; -o-transition: 0.30s ease-in-out; outline: none;  } .form-style input[type=text]:focus, .form-style input[type=date]:focus, .form-style input[type=datetime]:focus, .form-style input[type=number]:focus, .form-style input[type=search]:focus, .form-style input[type=time]:focus, .form-style input[type=url]:focus, .form-style input[type=email]:focus, .form-style textarea:focus, .form-style 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 .field-divided{ width: 49%; }  .form-style .field-long{ width: 100%; } .form-style .field-select{ width: 100%; } .form-style .field-textarea{ height: 100px; } .form-style input[type=submit], .form-style-1 input[type=button]{ background: #4b99ad; padding: 8px 15px 8px 15px; border: none; color: #fff; } .form-style 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 .required{ color:red; } 

give each form element own id:

<form id="searchbar> <input type="text" class="search rounded" placeholder="search..."> 

and contact form:

    <form id=contactform> code here </form> 

then apply individual css each id:

    #searchbar { search bar css; }  #contactform { contact form css; }