チェックするとチェックの色が上下からバツになるチェックボックスです。
<div class="cp_ipcheck">
<ul>
<li class="list_item">
<label>
<input type="checkbox" class="option-input06" checked />
ネコ
</label>
</li>
<li class="list_item">
<label>
<input type="checkbox" class="option-input06" />
イヌ
</label>
</li>
<li class="list_item">
<label>
<input type="checkbox" class="option-input06" />
ウサギ
</label>
</li>
</ul>
</div>
.cp_ipcheck {
width: 90%;
margin: 2em auto;
text-align: left;
}
.cp_ipcheck ul {
margin: 0.5rem 0.5rem 2rem 0.5rem;
padding: 0.5rem 1rem;
list-style: none;
border: 1px solid #cccccc;
}
.cp_ipcheck .list_item {
margin: 0 0 0.5rem 0;
padding: 0;
}
.cp_ipcheck label {
line-height: 135%;
position: relative;
margin: 0.5rem;
padding-left: 1rem;
cursor: pointer;
}
.cp_ipcheck .option-input06 {
position: relative;
top: -0.375rem;
margin: 0 1rem 0 0;
cursor: pointer;
outline: none;
-webkit-appearance: none;
}
.cp_ipcheck .option-input06:before, .option-input06:after {
position: absolute;
z-index: 1;
top: -0.0625rem;
left: -1rem;
width: 1rem;
height: 1rem;
content: '';
-webkit-transition: -webkit-transform 0.4s ease-in-out, border-top 0.4s ease-in-out, border-bottom 0.4s ease-in-out, border-left 0.1s 0.3s ease-in-out, border-right 0.1s 0.3s ease-in-out;
transition: transform 0.4s ease-in-out, border-top 0.4s ease-in-out, border-bottom 0.4s ease-in-out, border-left 0.1s 0.3s ease-in-out, border-right 0.1s 0.3s ease-in-out;
-webkit-transform: translateX(0) translateY(-0.5rem);
transform: translateX(0) translateY(-0.5rem);
border: 2px solid #f2f2f2;
border-top-style: none;
border-right-style: none;
}
.cp_ipcheck .option-input06:after {
z-index: 0;
border: 2px solid #f2f2f2;
border-bottom-style: none;
border-left-style: none;
}
.cp_ipcheck .option-input06:checked:before {
-webkit-transform: rotate(-45deg) translateX(0.25rem) translateY(-0.75rem);
transform: rotate(-45deg) translateX(0.25rem) translateY(-0.75rem);
border-color: #e74c3c;
border-left-style: none;
}
.cp_ipcheck .option-input06:checked:after {
-webkit-transform: rotate(45deg) translateX(-0.25rem) translateY(0.25rem);
transform: rotate(45deg) translateX(-0.25rem) translateY(0.25rem);
border-color: #e74c3c;
border-right-style: none;
}
CSS3などで新たに追加された要素・装飾方法など、日々コードを書いていないと忘れてしまったり、ささっとプロトタイプを作る時などちょっとしたことに時間をかけている暇はない。そんな時に「あ〜、あれストックしときゃよかったなぁ」って困った自分用のストックブログです。カスタマイズなどがしやすいよう、昨今のweb制作に取り入れられる一般的なコードを中心に掲載しています。
@copypet_jp More Info