作りはシンプルですがフィールド内に右から項目が出てくるメールフォームです。
<div class="cp_form03">
<form class="go-right">
<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>
</form>
</div>.cp_form {
position: relative;
width: 600px;
margin: 40px auto;
padding: 1em 2em;
box-shadow:0px 0px 3px 2px #ededed;
}
.cp_form form.go-right > .cp_tx {
position: relative;
width: 100%;
margin: 1em 0;
}
.cp_form form.go-right input[type=password],
.cp_form form.go-right input[type=email],
.cp_form form.go-right input[type=url],
.cp_form form.go-right input[type=date],
.cp_form form.go-right input[type=number],
.cp_form form.go-right input[type='text'],
.cp_form form.go-right input[type='tel'],
.cp_form form.go-right .cp_ipfile .file_text,
.cp_form form.go-right 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-right input[type=password]:valid,
.cp_form form.go-right input[type=email]:valid,
.cp_form form.go-right input[type=url]:valid,
.cp_form form.go-right input[type=date]:valid,
.cp_form form.go-right input[type=number]:valid,
.cp_form form.go-right input[type='text']:valid,
.cp_form form.go-right input[type='tel']:valid,
.cp_form form.go-right textarea:valid {
background: #e7fcff;/*背景色*/
}
.cp_form form.go-right input[type=password]:focus,
.cp_form form.go-right input[type=email]:focus,
.cp_form form.go-right input[type=url]:focus,
.cp_form form.go-right input[type=date]:focus,
.cp_form form.go-right input[type=number]:focus,
.cp_form form.go-right input[type='text']:focus,
.cp_form form.go-right input[type='tel']:focus,
.cp_form form.go-right textarea:focus {
border-color: #da3c41;
}
.cp_form form.go-right input[type=password]:focus + label,
.cp_form form.go-right input[type=email]:focus + label,
.cp_form form.go-right input[type=url]:focus + label,
.cp_form form.go-right input[type=date]:focus + label,
.cp_form form.go-right input[type=number]:focus + label,
.cp_form form.go-right input[type='text']:focus + label,
.cp_form form.go-right input[type='tel']:focus + label,
.cp_form form.go-right 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-right .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-right textarea {
display: block;
resize: vertical;
}
.cp_form form.go-right input[type=password],
.cp_form form.go-right input[type=email],
.cp_form form.go-right input[type=url],
.cp_form form.go-right input[type=date],
.cp_form form.go-right input[type=number],
.cp_form form.go-right input[type='text'],
.cp_form form.go-right input[type='tel'],
.cp_form form.go-right textarea {
padding: 12px 10% 12px 12px;
}
.cp_form form.go-right .cp_tx label {
top: 2px;
right: 100%;
bottom: 2px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: 100%;
margin-right: -100%;
}
.cp_form form.go-right input[type=password]:focus + label,
.cp_form form.go-right input[type=email]:focus + label,
.cp_form form.go-right input[type=url]:focus + label,
.cp_form form.go-right input[type=date]:focus + label,
.cp_form form.go-right input[type=number]:focus + label,
.cp_form form.go-right input[type='text']:focus + label,
.cp_form form.go-right input[type='tel']:focus + label,
.cp_form form.go-right textarea:focus + label {
right: 0;
width: 10%;
margin-right: 0;
padding-top: 5px;
}
.cp_form .cp_ipselect {
overflow: hidden;
width: 100%;
margin: 1em auto;
text-align: center;
}
.cp_form .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_form .cp_ipselect select::-ms-expand {
display: none;
}
.cp_form .cp_ipselect.cp_sl01 {
position: relative;
border: 1px solid #cccccc;
border-radius: 2px;
}
.cp_form .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_form .cp_ipselect.cp_sl01 select {
padding: 8px 38px 8px 8px;
color: #999999;
}
.cp_form .cp_ipselect.cp_sl01 select:valid {
color: #333333;
}
.cp_form .cp_input {
display: inline-block;
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: 49%;
padding: 8px 12px;
color: #999999;
}
.cp_form .cp_ipcheck,
.cp_form .cp_ipradio {
position: relative;
text-align: left;
}
.cp_form .cp_ipcheck input,
.cp_form .cp_ipradio input {
display: none;
}
.cp_form .cp_ipcheck label,
.cp_form .cp_ipradio label {
position: relative;
display: block;
padding: 0.5em 0;
padding-right: 35px;
cursor: pointer;
color: #333333;
border-bottom: 1px solid #cccccc;
}
.cp_form .cp_ipcheck input[type='checkbox'],
.cp_form .cp_ipradio input[type='radio'] {
position: absolute;
visibility: hidden !important;
}
.cp_form .cp_ipcheck input[type='checkbox'] + label:before,
.cp_form .cp_ipcheck input[type='checkbox'] + label:after,
.cp_form .cp_ipradio input[type='radio'] + label:before,
.cp_form .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_form .cp_ipcheck input[type='checkbox'] + label:before,
.cp_form .cp_ipradio input[type='radio'] + label:before {
right: 0;
width: 30px;
height: 15px;
border: 1px solid #cccccc;
border-radius: 15px;
background: #ffffff;
}
.cp_form .cp_ipcheck input[type='checkbox'] + label:after,
.cp_form .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_form .cp_ipcheck input[type='checkbox']:checked + label:after,
.cp_form .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: .8em;
position: absolute;
z-index: 1;
top: 0;
right: 0;
bottom: 0;
padding: .7rem 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 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: -10px;
width: 20px;
height: 90px;
content: '';
transition: 0.3s;
opacity: 0.3;
background: #ffffff;
}
.cp_form .btn:hover:before {
left: 90%;
}
CSS3などで新たに追加された要素･装飾方法など、日々コードを書いていないと忘れてしまったり、ささっとプロトタイプを作る時などちょっとしたことに時間をかけている暇はない。そんな時に「あ〜、あれストックしときゃよかったなぁ」って困った自分用のストックブログです。カスタマイズなどがしやすいよう、昨今のweb制作に取り入れられる一般的なコードを中心に掲載しています。
@CopypetJp More Info