[パーツ]メールフォーム フィールド内に下から項目が出てくる

CSS HTML
 2018.02.07
 2018.03.23

フィールド内に下から項目が出てくる

作りはシンプルですがフィールド内に下から項目が出てくるメールフォームです。

browser:  65 11 20 10 
ニャン易度 
 <div class="cp_form">
 <form class="go-bottom">
 <h2>Contact Form Sample</h2>
 <div class="cp_tx">
 	<input id="name" name="name" type="text" required>
 	<label for="name">Textfield</label>
 </div>
 <div class="cp_tx">
 	<input id="phone" name="phone" type="tel" required>
 	<label for="phone">Phone</label>
 </div>
 <div class="cp_tx">
 	<textarea id="message" name="message" required></textarea>
 	<label for="message">Message</label>
 </div>
 <div class="cp_ipselect cp_sl01">
 <select required>
 	<option value="" hidden>Choose</option>
 	<option value="1">cat</option>
 	<option value="2">dog</option>
 	<option value="3">rabbit</option>
 	<option value="4">squirrel</option>
 </select>
 </div>
 <div class="cp_input">
 <div class="cp_ipcheck">
 	Checkbox
 	<input type="checkbox" id="c_ch1" checked />
 	<label for="c_ch1">cat</label>
 	<input type="checkbox" id="c_ch2" />
 	<label for="c_ch2">dog</label>
 	<input type="checkbox" id="c_ch3" />
 	<label for="c_ch3">rabbit</label>
 </div>
 </div>
 <div class="cp_input">
 <div class="cp_ipradio">
 	RadioButton
 	<input type="radio" name="cpipr04" id="b_rb1" value="1">
 	<label for="b_rb1">cat</label>
 	<input type="radio" name="cpipr04" id="b_rb2" value="2">
 	<label for="b_rb2">dog</label>
 	<input type="radio" name="cpipr04" id="b_rb3" value="3" checked>
 	<label for="b_rb3">rabbit</label>
 </div>
 </div>
 <div class="cp_ipfile">
 	<label>
 		<div class="button">Choose File</div>
 		<input type="file" class="file_input" name="file" />
 		<div class="file_text">No file selected</div>
 	</label>
 </div>
 <div class="cp_btn">
 <div class="btn_cont">
 	<button class="btn" type="button"><span>Submit</span></button>
 </div>
 </div>
.cp_form {
position: relative;
width: 600px;
margin: 40px auto;
padding: 1em 2em;
box-shadow:0px 0px 3px 2px #ededed;
}
.cp_form form.go-bottom > .cp_tx {
position: relative;
width: 100%;
margin: 1em 0;
}
.cp_form form.go-bottom input[type=button],
.cp_form form.go-bottom input[type=submit],
.cp_form form.go-bottom input[type=checkbox],
.cp_form form.go-bottom input[type=radio],
.cp_form form.go-bottom input[type='text'],
.cp_form form.go-bottom input[type='tel'],
.cp_form form.go-bottom input[type=password],
.cp_form form.go-bottom input[type=email],
.cp_form form.go-bottom input[type=url],
.cp_form form.go-bottom input[type=date],
.cp_form form.go-bottom input[type=number],
.cp_form form.go-bottom .cp_ipfile .file_text,
.cp_form form.go-bottom textarea {
font-family: inherit;
font-size: 1rem;
position: relative;
z-index: 1;
top: 0;
left: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: 100%;
padding: 8px 12px;
border: 1px solid #cccccc;
outline: 0;
background: none;
}
.cp_form form.go-bottom input[type=password]:valid,
.cp_form form.go-bottom input[type=email]:valid,
.cp_form form.go-bottom input[type=url]:valid,
.cp_form form.go-bottom input[type=date]:valid,
.cp_form form.go-bottom input[type=number]:valid,
.cp_form form.go-bottom input[type='text']:valid,
.cp_form form.go-bottom input[type='tel']:valid,
.cp_form form.go-bottom textarea:valid {
background: #e7fcff;/*背景色*/
}
.cp_form form.go-bottom input[type=password]:focus,
.cp_form form.go-bottom input[type=email]:focus,
.cp_form form.go-bottom input[type=url]:focus,
.cp_form form.go-bottom input[type=date]:focus,
.cp_form form.go-bottom input[type=number]:focus,
.cp_form form.go-bottom input[type='text']:focus,
.cp_form form.go-bottom input[type='tel']:focus,
.cp_form form.go-bottom textarea:focus {
border-color: #da3c41;
}
.cp_form form.go-bottom input[type=password]:focus + label,
.cp_form form.go-bottom input[type=email]:focus + label,
.cp_form form.go-bottom input[type=url]:focus + label,
.cp_form form.go-bottom input[type=date]:focus + label,
.cp_form form.go-bottom input[type=number]:focus + label,
.cp_form form.go-bottom input[type='text']:focus + label,
.cp_form form.go-bottom input[type='tel']:focus + label,
.cp_form form.go-bottom textarea:focus + label {
font-size: 0.7em;
line-height: 1.2;
z-index: 2;
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: 100%;
padding: 1px 6px 2px 6px;
text-transform: uppercase;
color: #ffffff;
background: #da3c41;
}
.cp_form form.go-bottom .cp_tx label {
position: absolute;
padding: 7px 6px;
transition: background 0.2s, color 0.2s, top 0.2s, bottom 0.2s, right 0.2s, left 0.2s;
color: #999999;
}
.cp_form form.go-bottom textarea {
display: block;
resize: vertical;
}
.cp_form form.go-bottom input[type=password],
.cp_form form.go-bottom input[type=email],
.cp_form form.go-bottom input[type=url],
.cp_form form.go-bottom input[type=date],
.cp_form form.go-bottom input[type=number],
.cp_form form.go-bottom input[type='text'],
.cp_form form.go-bottom input[type='tel'],
.cp_form form.go-bottom textarea {
padding: 12px 12px 12px 12px;
}
.cp_form form.go-bottom label {
top: 0;
bottom: 0;
left: 0;
}
.cp_form form.go-bottom input[type=password]:focus + label,
.cp_form form.go-bottom input[type=email]:focus + label,
.cp_form form.go-bottom input[type=url]:focus + label,
.cp_form form.go-bottom input[type=date]:focus + label,
.cp_form form.go-bottom input[type=number]:focus + label,
.cp_form form.go-bottom input[type='text']:focus + label,
.cp_form form.go-bottom input[type='tel']:focus + label,
.cp_form form.go-bottom textarea:focus + label {
top: 100%;
margin-top: -16px;
}
.cp_ipselect {
overflow: hidden;
width: 100%;
margin: 1em auto;
text-align: center;
}
.cp_ipselect select {
font-family: inherit;
font-size: 1rem;
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: 100%;
padding-right: 1em;
cursor: pointer;
text-indent: 0.01px;
text-overflow: ellipsis;
border: none;
border-radius: 0;
outline: none;
background: transparent;
background-image: none;
box-shadow: none;
-webkit-appearance: none;
appearance: none;
}
.cp_ipselect select::-ms-expand {
display: none;
}
.cp_ipselect.cp_sl01 {
position: relative;
border: 1px solid #cccccc;
border-radius: 2px;
}
.cp_ipselect.cp_sl01::before {
position: absolute;
top: 1em;
right: 0.9em;
width: 0;
height: 0;
padding: 0;
content: '';
pointer-events: none;
border-top: 6px solid #da3c41;
border-right: 6px solid transparent;
border-left: 6px solid transparent;
}
.cp_ipselect.cp_sl01 select {
padding: 8px 38px 8px 8px;
color: #999999;
}
.cp_ipselect.cp_sl01 select:valid {
color: #333333;
}
.cp_input {
display: inline-block;
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: 49%;
padding: 8px 12px;
color: #999999;
}
.cp_ipcheck, .cp_ipradio {
position: relative;
text-align: left;
}
.cp_ipcheck input, .cp_ipradio input {
display: none;
}
.cp_ipcheck label, .cp_ipradio label {
position: relative;
display: block;
padding: 0.5em 0;
padding-right: 35px;
cursor: pointer;
color: #333333;
border-bottom: 1px solid #cccccc;
}
.cp_ipcheck input[type='checkbox'],
.cp_ipradio input[type='radio'] {
position: absolute;
visibility: hidden !important;
}
.cp_ipcheck input[type='checkbox'] + label:before,
.cp_ipcheck input[type='checkbox'] + label:after,
.cp_ipradio input[type='radio'] + label:before,
.cp_ipradio input[type='radio'] + label:after {
position: absolute;
top: 50%;
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin-top: -7.5px;
content: '';
}
.cp_ipcheck input[type='checkbox'] + label:before,
.cp_ipradio input[type='radio'] + label:before {
right: 0;
width: 30px;
height: 15px;
border: 1px solid #cccccc;
border-radius: 15px;
background: #ffffff;
}
.cp_ipcheck input[type='checkbox'] + label:after,
.cp_ipradio input[type='radio'] + label:after {
right: 15px;
width: 15px;
height: 15px;
-webkit-transition: all 200ms ease-out;
transition: all 200ms ease-out;
border-radius: 50%;
background: #cccccc;
}
.cp_ipcheck input[type='checkbox']:checked + label:after,
.cp_ipradio input[type='radio']:checked + label:after {
right: 0;
background: #da3c41;
}
/* File input */
.cp_form .cp_ipfile {
position: relative;
margin: 1em auto;
}
.cp_form .cp_ipfile .title {
position: static;
}
.cp_form .cp_ipfile .button {
font-size: .6em;
position: absolute;
z-index: 1;
top: 0;
right: 0;
bottom: 0;
padding: .5rem 1.2em 0 1.2em;
cursor: pointer;
-webkit-transition: background-color 0.25s;
transition: background-color 0.25s;
color: #ffffff;
border-radius: 0;
background-color: #999999;
}
.cp_form .cp_ipfile .file_input {
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 100%;
padding: 0;
cursor: pointer;
opacity: 0;
filter: alpha(opacity=0);
-webkit-appearance: none;
appearance: none;
}
.cp_form .cp_ipfile .file_text {
position: relative;
box-sizing: border-box;
padding: 0em 10px 0.5em 10px;
-webkit-transition: border-color 0.6s;
transition: border-color 0.6s;
border-bottom: 0.0625rem solid #999999;
outline: none;
}
.cp_form .cp_ipfile .file_text::before {
content: '';
height: 2px;
width: 0;
right: 0%;
bottom: -1px;
position: absolute;
background: #da3c41;
-webkit-transition: left 0.28s ease, width 0.28s ease;
transition: left 0.28s ease, width 0.28s ease;
z-index: 2;
}
.cp_form .cp_ipfile .file_input:hover ~ .file_text::before {
width: 100%;
right: 0;
}
.cp_form .cp_ipfile label:hover .button {
background-color: #da3c3c;
}
.cp_form .cp_ipfile label:active .button {
background-color: #b02f2f;
}
/*btn*/
.cp_form .cp_btn {
width: 100%;
margin: 2em auto;
text-align: center;
}
.cp_form .btn_cont {
text-align: center;
}
.cp_form .btn {
position: relative;
display: block;
overflow: hidden;
margin: 0 auto;
padding: 0.75rem 3em;
cursor: pointer;
text-align: center;
text-decoration: none;
color: #ffffff;
border: solid 1px #ffffff;
background: #da3c41;
font-size: 1rem;
}
.cp_form .btn:before {
position: absolute;
top: -25px;
left: -20px;
width: 20px;
height: 90px;
content: '';
transition: 0.3s;
transform: rotate(40deg);
opacity: 0.3;
background: #ffffff;
}
.cp_form .btn:hover:before {
left: 95%;
}

copypet.jp

CSS3などで新たに追加された要素・装飾方法など、日々コードを書いていないと忘れてしまったり、ささっとプロトタイプを作る時などちょっとしたことに時間をかけている暇はない。そんな時に「あ〜、あれストックしときゃよかったなぁ」って困った自分用のストックブログです。カスタマイズなどがしやすいよう、昨今のweb制作に取り入れられる一般的なコードを中心に掲載しています。

More Info

こんな記事はいかがですか?