form

Style 1

Style 2

		
<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;
}
		
	

Style Switcher

Select Layout
Chose Color
Chose Pattren
Chose Background
Become China's leading online entertainment content integration and game information dissemination platform, providing users with the most comprehensive and convenient entertainment experience.Phone:+86 189 6672 8784Email:[email protected]WeChat:28_125