【サンプルあり！】自作のチェックボックスをつくろう【HTML/CSS】

<label class="my-checkbox-label">
  <input type="checkbox">
  <span class="my-checkbox"></span>
  <span class="my-text">カスタムチェックボックス</span>
</label>

/* 標準のチェックボックスの装飾 */
.my-checkbox-label input[type="checkbox"] {
  display: none; /* チェックボックスを非表示にする */
}

/* 自作のチェックボックスの装飾用 */
.my-checkbox-label .my-checkbox {
  display: inline-block; /* インラインブロック要素として表示 */
  width: 20px; /* 幅指定 */
  height: 20px; /* 高さ指定 */
  border: 2px solid red; /* 枠線の赤 */
  background-color: #fff; /* デフォルトの背景色 */
  vertical-align: middle; /* 垂直方向の中央揃え */
  line-height: 1; /* ラインハイトをリセット */
  box-sizing: border-box; /* border-boxモデルを使用して要素のサイズを計算 */
  margin-right: 5px; /* チェックボックスとテキストの間隔 */
  top: -0.05em; /* 少し下にずれるので微調整 */
  position: relative; /* 相対位置指定 */
}

/* チェックされたときの装飾 */
.my-checkbox-label input[type="checkbox"]:checked + .my-checkbox {
  background: red;
}

/* チェックボックスのチェックマークのスタイル */
.my-checkbox-label input[type="checkbox"]:checked + .my-checkbox::after {
  content: ""; /* コンテンツを追加 */
  position: absolute; /* 絶対位置指定 */
  top: 0%; /* 上端を中央に配置 */
  left: 25%; /* 左端を中央に配置 */
  width: 5px; /* 幅指定 */
  height: 10px; /* 高さ指定 */
  border: solid pink; /* チェックマークの色 */
  border-width: 0 2px 2px 0; /* チェックマークの形状を指定 */
  transform: rotate(45deg); /* チェックマークを回転させる */
}

/* テキストのスタイル */
.my-checkbox-label .my-text {
  color: pink; /* テキストの色を指定 */
}

/* チェックボックスがdisabledの場合のスタイル */ 
.my-checkbox-label input[type="checkbox"]:disabled + .my-checkbox { 
  pointer-events: none; /* マウスイベントを無効化してクリックを無効にする */
  border-color: darkgray;
} 

/* チェックボックスがdisabledの場合のテキストのスタイル */ 
.my-checkbox-label input[type="checkbox"]:disabled + .my-checkbox + .my-text {
  color: darkgray; /* テキストの色をダークグレーにする */ 
} 

/* チェックボックスがdisabledでかつチェックされた場合のスタイル */ 
.my-checkbox-label input[type="checkbox"]:disabled:checked + .my-checkbox { 
  background-color: darkgray; /* チェックされていてdisabledの場合の背景色を指定 */ 
}