CSSを使用して背景色付きのカスタムチェックボックスを作成する方法をご紹介します。
デフォルトのチェックボックスをカスタマイズしたい場合、以下の方法で独自のスタイルをあてることができます。
標準のチェックボックスを消す
「appearance: none;」でデフォルトのチェックボックスを無効にします。
<div class="bg-checkbox">
<input type="checkbox" checked="" id="bg-check-1">
<label for="bg-check-1">背景色入り..</label>
</div>
.bg-checkbox input[type=checkbox] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}チェックボックスの枠をつくる
「width」「height」でチェックボックスのサイズを指定。「margin-top」で位置を調整し、「border-radius」で丸枠にします。
.bg-checkbox input[type=checkbox] {
position: relative;
cursor: pointer;
width: 18px;
height: 18px;
margin-top: -1px;
border-radius: 3px;
background-color: #ddd;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
vertical-align: middle;
transition: .3s;
}
チェック時に背景を入れる
「:checked」で背景を指定し、「:checked::before」でfontawesomeのチェックマークアイコンを指定してます。
.bg-checkbox input[type=checkbox]:checked {
background: #439fc6;
}
.bg-checkbox input[type=checkbox]:checked::before {
position: absolute;
padding: 4px;
color: white;
font-family: "Font Awesome 5 Free";
font-weight: 900;
font-size: 10px;
content: '\f00c';
}
全てのソース
コードを表示
.bg-checkbox {
margin-bottom: 1rem;
}
.bg-checkbox input[type=checkbox] {
position: relative;
cursor: pointer;
width: 18px;
height: 18px;
margin-top: -1px;
border-radius: 3px;
background-color: #ddd;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
vertical-align: middle;
transition: .3s;
}
.bg-checkbox input[type=checkbox]:checked {
background: #439fc6;
}
.bg-checkbox input[type=checkbox]:checked::before {
position: absolute;
padding: 4px;
color: white;
font-family: "Font Awesome 5 Free";
font-weight: 900;
font-size: 10px;
content: '\f00c';
}HTML・CSSのカスタマイズや動作確認ができます
