シンプルなメールフォームです。
<div class="cp_form">
<form>
<h1>Contact Form Sample</h1>
<div class="cp_group">
<input type="text" required="required" />
<label class="cp_label" for="input">Textfield</label>
<i class="bar"></i>
</div>
<div class="cp_group">
<textarea required="required"></textarea>
<label class="cp_label" for="textarea">Textarea</label>
<i class="bar"></i>
</div>
<div class="cp_group cp_ipselect">
<select class="cp_sl" required>
<option value="" hidden disabled selected></option>
<option value="1">cat</option>
<option value="2">dog</option>
<option value="3">rabbit</option>
<option value="4">squirrel</option>
</select>
<label class="cp_sl_selectlabel">Select</label>
<i class="bar"></i>
</div>
<div class="checkbox">
<label>
<input type="checkbox" checked="checked"/>
<i class="ch_bar"></i>checkbox1
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox"/>
<i class="ch_bar"></i>checkbox2
</label>
</div>
<div class="cp_radio">
<div class="radio">
<label>
<input type="radio" name="radio" checked="checked"/>
<i class="ch_bar"></i>radiobutton1
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="radio"/>
<i class="ch_bar"></i>radiobutton2
</label>
</div>
</div>
<div class="cp_group">
<div class="cp_file">
<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>
</form>
<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 .cp_radio, .cp_group {
position: relative;
margin-top: 2.25rem;
margin-bottom: 2.25rem;
}
.cp_form .cp_group input[type=button],
.cp_form .cp_group input[type=submit],
.cp_form .cp_group input[type=checkbox],
.cp_form .cp_group input[type=radio],
.cp_form .cp_group input[type=text],
.cp_form .cp_group input[type=tel],
.cp_form .cp_group input[type=password],
.cp_form .cp_group input[type=email],
.cp_form .cp_group input[type=url],
.cp_form .cp_group input[type=date],
.cp_form .cp_group input[type=number],
.cp_form .cp_group textarea,
.cp_form .cp_group .cp_file .file_text,
.cp_form .cp_group select {
font-family: inherit;
}
.cp_form .cp_group input {
height: 1.9rem;
}
.cp_form .cp_group textarea {
resize: vertical;
}
.cp_form .cp_group select::-ms-expand {
display: none;
}
.cp_form .cp_ipselect {
position: relative;
width: 100%;
margin: 2em auto;
}
.cp_form .cp_sl {
position: relative;
font-size: 1rem;
font-family: inherit;
background-color: transparent;
width: 100%;
padding: 10px 10px 10px 0;
border-radius: 0;
border: none;
}
.cp_form .cp_sl:focus {
outline: none;
border-bottom: 1px solid rgba(0,0,0, 0);
}
.cp_form .cp_ipselect .cp_sl {
-webkit-appearance: none;
appearance: none;
}
.cp_form .cp_ipselect:after {
position: absolute;
top: 18px;
right: 10px;
width: 0;
height: 0;
padding: 0;
content: '';
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-top: 6px solid rgba(0, 0, 0, 0.3);
pointer-events: none;
}
.cp_form .cp_sl_selectlabel {
color: #b3b3b3;
position: absolute;
pointer-events: none;
left: 0;
top: 10px;
transition: 0.2s ease all;
}
.cp_form .cp_sl:focus ~ .cp_sl_selectlabel,
.cp_form .cp_sl:valid ~ .cp_sl_selectlabel {
font-size: 0.8rem;
color: #da3c41;
top: -20px;
transition: 0.2s ease all;
}
.cp_form .cp_sl_selectbar {
position: relative;
display: block;
width: 100%;
}
.cp_form .cp_sl_selectbar:before,
.cp_form .cp_sl_selectbar:after {
content: '';
height: 2px;
width: 0;
bottom: 1px;
position: absolute;
background: #da3c41;
transition: 0.2s ease all;
}
.cp_form .cp_sl_selectbar:before {
left: 50%;
}
.cp_form .cp_sl_selectbar:after {
right: 50%;
}
.cp_form .cp_sl:focus ~ .cp_sl_selectbar:before,
.cp_form .cp_sl:focus ~ .cp_sl_selectbar:after {
width: 50%;
}
.cp_form .cp_sl_highlight {
position: absolute;
top: 25%;
left: 0;
pointer-events: none;
opacity: 0.5;
}
.cp_form .cp_group .cp_label {
position: absolute;
top: 0.25rem;
pointer-events: none;
padding-left: 0.125rem;
z-index: 1;
color: #b3b3b3;
font-size: 1rem;
font-weight: normal;
-webkit-transition: all 0.28s ease;
transition: all 0.28s ease;
}
.cp_form .cp_group .bar {
position: relative;
border-bottom: 0.0625rem solid #999999;
display: block;
}
.cp_form .cp_group .bar::before {
content: '';
height: 0.125rem;
width: 0;
left: 50%;
bottom: -0.0625rem;
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_group input[type=button],
.cp_form .cp_group input[type=submit],
.cp_form .cp_group input[type=checkbox],
.cp_form .cp_group input[type=radio],
.cp_form .cp_group input[type=text],
.cp_form .cp_group input[type=tel],
.cp_form .cp_group input[type=password],
.cp_form .cp_group input[type=email],
.cp_form .cp_group input[type=url],
.cp_form .cp_group input[type=date],
.cp_form .cp_group input[type=number],
.cp_form .cp_group textarea {
display: block;
background: none;
padding: 0.125rem 0.125rem 0.0625rem;
font-size: 1rem;
border-width: 0;
border-color: transparent;
line-height: 1.9;
width: 100%;
color: transparent;
-webkit-transition: all 0.28s ease;
transition: all 0.28s ease;
-webkit-box-shadow: none;
box-shadow: none;
}
.cp_form .cp_group select,
.cp_form .cp_group input:focus,
.cp_form .cp_group input:valid,
.cp_form .cp_group textarea:focus,
.cp_form .cp_group textarea:valid {
color: #333333;
}
.cp_form .cp_group select ~ .cp_label,
.cp_form .cp_group input:focus ~ .cp_label,
.cp_form .cp_group input:valid ~ .cp_label,
.cp_form .cp_group textarea:focus ~ .cp_label,
.cp_form .cp_group textarea:valid ~ .cp_label {
font-size: 0.8rem;
color: #da3c41;
top: -1rem;
left: 0;
}
.cp_form .cp_group select:hover,
.cp_form .cp_group input:focus,
.cp_form .cp_group textarea:focus {
outline: none;
}
.cp_form .cp_group select:hover ~ .cp_label,
.cp_form .cp_group input:focus ~ .cp_label,
.cp_form .cp_group textarea:focus ~ .cp_label {
color: #da3c41;
}
.cp_form .cp_group select:hover ~ .bar::before,
.cp_form .cp_group input:focus ~ .bar::before,
.cp_form .cp_group textarea:focus ~ .bar::before {
width: 100%;
left: 0;
}
.cp_form .checkbox label,
.cp_form .cp_radio label {
position: relative;
cursor: pointer;
padding-left: 2rem;
text-align: left;
color: #333333;
display: block;
}
.cp_form .checkbox input,
.cp_form .cp_radio input {
width: auto;
opacity: 0.00000001;
position: absolute;
left: 0;
}
.cp_form .radio {
margin-bottom: 1rem;
}
.cp_form .radio .ch_bar {
position: absolute;
top: -0.25rem;
left: -0.25rem;
cursor: pointer;
display: block;
font-size: 1rem;
-webkit-user-select: none;
user-select: none;
color: #999999;
}
.cp_form .radio .ch_bar::before,
.cp_form .radio .ch_bar::after {
content: '';
position: absolute;
left: 0;
top: 0;
margin: 0.25rem;
width: 1rem;
height: 1rem;
-webkit-transition: -webkit-transform 0.28s ease;
transition: transform 0.28s ease;
border-radius: 50%;
border: 0.125rem solid currentColor;
}
.cp_form .radio .ch_bar::after {
-webkit-transform: scale(0);
transform: scale(0);
background-color: #da3c41;
border-color: #da3c41;
}
.cp_form .radio label:hover .ch_bar {
color: #da3c41;
}
.cp_form .radio input:checked ~ .ch_bar::after {
-webkit-transform: scale(0.5);
transform: scale(0.5);
}
.cp_form .radio input:checked ~ .ch_bar::before {
color: #da3c41;
}
.cp_form .checkbox {
margin-top: 3rem;
margin-bottom: 1rem;
}
.cp_form .checkbox .ch_bar {
color: #999999;
position: absolute;
top: 0;
left: 0;
width: 1rem;
height: 1rem;
z-index: 0;
border: 0.125rem solid currentColor;
border-radius: 0.0625rem;
-webkit-transition: border-color 0.28s ease;
transition: border-color 0.28s ease;
}
.cp_form .checkbox .ch_bar::before,
.cp_form .checkbox .ch_bar::after {
position: absolute;
height: 0;
width: 0.2rem;
background-color: #da3c41;
display: block;
-webkit-transform-origin: left top;
transform-origin: left top;
border-radius: 0.25rem;
content: '';
-webkit-transition: opacity 0.28s ease, height 0s linear 0.28s;
transition: opacity 0.28s ease, height 0s linear 0.28s;
opacity: 0;
}
.cp_form .checkbox .ch_bar::before {
top: 0.65rem;
left: 0.38rem;
-webkit-transform: rotate(-135deg);
transform: rotate(-135deg);
-webkit-box-shadow: 0 0 0 0.0625rem #ffffff;
box-shadow: 0 0 0 0.0625rem #ffffff;
}
.cp_form .checkbox .ch_bar::after {
top: 0.3rem;
left: 0;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.cp_form .checkbox label:hover .ch_bar {
color: #da3c41;
}
.cp_form .checkbox input:checked ~ .ch_bar {
color: #da3c41;
}
.cp_form .checkbox input:checked ~ .ch_bar::after,
.cp_form .checkbox input:checked ~ .ch_bar::before {
opacity: 1;
-webkit-transition: height 0.28s ease;
transition: height 0.28s ease;
}
.cp_form .checkbox input:checked ~ .ch_bar::after {
height: 0.5rem;
}
.cp_form .checkbox input:checked ~ .ch_bar::before {
height: 1.2rem;
-webkit-transition-delay: 0.28s;
transition-delay: 0.28s;
}
.cp_form .radio + .radio,
.cp_form .checkbox + .checkbox {
margin-top: 1rem;
}
/* File input */
.cp_form .cp_group .cp_file {
position: relative;
}
.cp_form .cp_group .cp_file .title {
position: static;
}
.cp_form .cp_group .cp_file .button {
font-size: 1em;
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_group .cp_file .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_group .cp_file .file_text {
position: relative;
box-sizing: border-box;
padding: 6px 10px;
-webkit-transition: border-color 0.6s;
transition: border-color 0.6s;
border-bottom: 0.0625rem solid #999999;
outline: none;
}
.cp_form .cp_group .cp_file .file_text::before {
content: '';
height: 2px;
width: 0;
left: 50%;
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_group .cp_file .file_input:hover ~ .file_text::before {
width: 100%;
left: 0;
}
.cp_form .cp_group .cp_file label:hover .button {
background-color: #da3c3c;
}
.cp_form .cp_group .cp_file label:active .button {
background-color: #b02f2f;
}
.cp_form .btn_cont {
text-align: center;
}
.cp_form .btn {
position: relative;
background: currentColor;
border: 1px solid currentColor;
font-size: 1.1rem;
color: #da3c41;
margin: 3rem 0;
padding: 0.75rem 3rem;
cursor: pointer;
-webkit-transition: background-color 0.28s ease, color 0.28s ease, -webkit-box-shadow 0.28s ease;
transition: background-color 0.28s ease, color 0.28s ease, box-shadow 0.28s ease;
overflow: hidden;
-webkit-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.3);
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.3);
}
.cp_form .btn span {
color: #ffffff;
position: relative;
z-index: 1;
}
.cp_form .btn::before {
content: '';
position: absolute;
background: #071017;
border: 50vh solid #1d4567;
width: 30vh;
height: 30vh;
border-radius: 50%;
display: block;
top: 50%;
left: 50%;
z-index: 0;
opacity: 1;
-webkit-transform: translate(-50%, -50%) scale(0);
transform: translate(-50%, -50%) scale(0);
}
.cp_form .btn:hover {
color: #3f51b5;
-webkit-box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.3);
box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.3);
}
.cp_form .btn:focus {
outline: none;
}
CSS3などで新たに追加された要素･装飾方法など、日々コードを書いていないと忘れてしまったり、ささっとプロトタイプを作る時などちょっとしたことに時間をかけている暇はない。そんな時に「あ〜、あれストックしときゃよかったなぁ」って困った自分用のストックブログです。カスタマイズなどがしやすいよう、昨今のweb制作に取り入れられる一般的なコードを中心に掲載しています。
@CopypetJp More Info