[TIL] Custom checkbox
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") ;
}
Reference
この問題について([TIL] Custom checkbox), 我々は、より多くの情報をここで見つけました
https://velog.io/@florence_y/TIL-Custom-checkbox
テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol
<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;
}
.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;
}
.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
") ;
}
input[type="checkbox"]:checked+.check_label::before{
background-image:url("https://ifh.cc/g/jH4YNX.png") ;
}
Reference
この問題について([TIL] Custom checkbox), 我々は、より多くの情報をここで見つけました https://velog.io/@florence_y/TIL-Custom-checkboxテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol