<form>
  <h1>CONTACT</h1>
    <div>
        <label><span>必須</span>名前</label>
        <input type="text" class="text" size="45" value="" />
    </div>
             
    <div>
      <label><span>必須</span>メールアドレス</label>
        <input type="text" class="text" size="45" value="" />
    </div>
             
    <div>
        <label>セレクトメニュー</label>
        <select class="dropdown" >
            <option>選択して下さい</option>
            <option>さつまいも</option>
            <option>くり</option>
            <option>かぼちゃ</option>
        </select>
    </div>
 
    <div>
        <label>コメント</label>
    <textarea cols="60" rows="3" name="comments" id="comments"></textarea>
    </div>
   <div>
    <input type="submit" class="submit" value="送信する" />
  </div>
</form>
form{
  background:#333333;
  width:700px;
  padding:20px 40px;
}
form div{
  padding: 10px 20px;
}
h1{
  text-align:center;
  font-size:30px;
  color:#fff;
}
.submit {
  border:none;
  color:#fff;
  display:block;
  margin:0 200px;
  text-align:center;
  background:#0E79EA;
  padding:7px 70px;
  border-radius: 17px;
  cursor: pointer;
  /* Webkit */
  -webkit-border-radius: 17px;
  -webkit-box-shadow: 2px 3px 2px #000;
  /* Firefox */
  -moz-border-radius: 17px;
  -moz-box-shadow: 2px 3px 2px #000;
}
label {
  display:block;
  float:left;
  width:200px;
  color:#fff;
}
span {
  background:#F8E71C;
  padding:4px 4px;
  font-size:12px;
  color:#000;
  margin-right:10px;
  border-radius: 3px;
}
.text, textarea, .dropdown{
  border:0px ;
  padding: 8px;
  color: #000;
  background: #F5F5F5;
  border-radius: 6px;
  /* Webkit */
  -webkit-box-shadow: 2px 3px 2px #000;
  /* Firefox */
  -moz-box-shadow: 2px 3px 2px #000;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.