要素の上にチェックボックスを重ねる方法

アピコです。

今回はECサイトなどで商品を選択して一括で追加するときなどに使うチェックボックスのご紹介。

画像の上に表示させたかったので、なるべく分かりやすいように大きめに表示しました。

/* コメント*/　を参考に入れ替え、利用してみてください。

HTML

<label class="ECM_CheckboxInput">
<input class="ECM_CheckboxInput-Input" type="checkbox" name="arr[]" value="{$item.1}" />
<span class="ECM_CheckboxInput-DummyInput"></span>
 </label>

CSS

.ECM_CheckboxInput-Input {
margin: 0;
width: 0;
opacity: 0;
}
.ECM_CheckboxInput:hover{
opacity: 0.8;　/* ホバー時の透明度*/
}
.ECM_CheckboxInput:hover > .ECM_CheckboxInput-DummyInput{
transform: scale(1.1);
}
.ECM_CheckboxInput-Input:focus + .ECM_CheckboxInput-DummyInput{
transform: scale(1.1);
}

/* チェック後の円*/
.ECM_CheckboxInput-Input:checked + .ECM_CheckboxInput-DummyInput {
background: #　　　;　/* 好きなカラー */
margin-top: -70px;　　/* どのくらい重ねるか */
margin-left: auto;　　/* 右よせ*/
margin-right: 10px;
}

/* チェックマーク-①*/
.ECM_CheckboxInput-Input:checked + .ECM_CheckboxInput-DummyInput::before {
content: “”;
display: block;
position: absolute;
top: 50%;
left: 50%;
width: 35%;
height: 4px;
border-radius: 2px;
transform: translate(-6px, 5px) rotateZ(-135deg);
transform-origin: 2px 2px;
background: #FFFFFF;
}

/* チェックマーク-②*/
.ECM_CheckboxInput-Input:checked + .ECM_CheckboxInput-DummyInput::after {
content: “”;
display: block;
position: absolute;
top: 50%;
left: 50%;
width: 70%;
height: 4px;
border-radius: 2px;
transform: translate(-6px, 5px) rotateZ(-45deg);
transform-origin: 2px 2px;
background: #FFFFFF;
}

/* チェック前の円*/
.ECM_CheckboxInput-DummyInput {
position: relative;
top: 0;
left: 0;
display: block;
width: 28px; /* 円の大きさ*/
height: 28px; /* 円の大きさ*/
border: solid 3px #　　　;　/* 好きなカラー */
background: #FFFFFF;
border-radius: 50%;
transition: all .15s linear;
margin-top: -70px;　/* どのくらい重ねるか */
margin-left: auto;　　/* 右よせ*/
margin-right: 10px;
}