【HTML/CSS】inputタグのcheckboxのボックスとチェックマークのカスタマイズ例／自作デザインしたい場合の作り方【CodePen】

/* ノーマルチェックボックスを非表示に */
input[type="checkbox"] {
  display: none;
}

  <!-- チェックボックス全体の囲い   -->
  <label class="checkbox-wrapper">
    <!--   チェックボックスの枠   -->
    <input type="checkbox" checked="checked">
    <!--   チェックボックス内のチェックマーク（通常はチェックマーク）   -->
    <span class="checkmark"></span>
    <!--   ラベルの文字   -->
    哺乳類
  </label>

/* チェックボックス全体 */
.checkbox-wrapper {
  display: block;
  position: relative;
  padding-left: 30px;
  margin-top: 22px;
  cursor: pointer;
  font-size: 16px;
  user-select: none;
}
/* チェックボックスのスタイル */
.checkbox-wrapper .checkmark {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 18px;
  width: 18px;
  border: 1px solid #122E4F;
  box-sizing: border-box;
}
/* チェックマーク作成 */
.checkbox-wrapper .checkmark:after {
  content: "";
  position: absolute;
  display: none;
  left: 4px;
  top: 4px;
  width: 8px;
  height: 8px;
  background-color: #CD3D69;
  border-radius: 50%;
}
/* チェック時のスタイル */
.checkbox-wrapper input:checked + .checkmark {
  border: 1px solid fw.$check-box;
}
/* チェック時 チェックマーク表示 */
.checkbox-wrapper input:checked + .checkmark:after {
  display: block;
}

/* 以下、体裁を整えるためのCSS */
.container{
  width: 300px;
  margin: 50px auto;
}