<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="5" 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;
}
input.submit {
  display:block;
  margin:0 200px;
  border:none;
}
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-box-shadow: 2px 3px 2px #000;
  -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.