<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;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.