2022.04.19 Today I Learned📚

checkboxを設定すると、デフォルトのスタイル表示が適用されます.
Check box
しかし、基本的なスタイルではなく、自分の好きなデザインに合わせて、よりきれいにカスタマイズすることができます.

✔️ Custom Checkbox

Checkboxを画像に置き換えます.

1.input要素を隠す

既存のチェックボックスを非表示にして、新しいチェックボックスを作成します.

<input type="checkbox" id="check">
<label for="check" class="check_label">초콜릿을 좋아하시나요?</label>

input[type="checkbox"] {
    position: absolute;
    clip: rect(0 0 0 0);
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
}

2.labelの修正

チェックボックスに貼り付けるラベルを変更します.アプリケーションinline-blockは、チェックボックスの横に貼ることを指定します.inputのidとlabelのforの名称を同じにして、ラベルをクリックしてもチェック/ロック解除チェックボックスをチェックできます.

.check_label {  
   display: inline-block;
    height: 22px;
    margin: 17px 0 21px;
    text-align: left;
    font-weight: 500;
    font-size: 16px;
    line-height: 20px;
    color: #E9AEDF;
    cursor: pointer;
}

3.仮想要素を作成し、チェックボックスを装飾する

labelの前にcheckboxが作成されるため、仮想要素::beforeが生成される.contentは、コンテンツがなくても""または''と書く仮想要素を加えなければならない.そうすれば、仮想要素の存在を認識することができる.生成された仮想要素に、background-imageに変更するチェックボックス画像を挿入します.

.check_label::before{
    display: inline-block;
    content:"";
    width:22px;
    height:22px;
    margin-right:8px;
    vertical-align: -4px;
    background-image:url("https://ifh.cc/g/jH4YNX.png
") ;
}

4.装飾選択時のチェックボックス

checkbox:checked+labelが選択されている場合のチェックボックスは、::before仮想要素として装飾されます.

input[type="checkbox"]:checked+.check_label::before{
    background-image:url("https://ifh.cc/g/jH4YNX.png") ;
}