チェックボックスをカスタムしよう

解答ソースコード

              <div class="checkbox">
  <input type="checkbox" name="" id="checkInput" class="checkbox-input">
  <label class="checkbox-parts" for="checkInput">チェックボックスをカスタムしよう！</label>
</div>
¥HTML¥
            

              .checkbox {
    text-align: center;
    color: #79808A;
    margin-top: 60px;
  }
  .checkbox-input{
    display: none;
  }
  .checkbox-parts{
    position: relative;
    padding-left: 38px;
    cursor: pointer;
  }
  .checkbox-parts::before{
    content: "";
    display: block;
    position: absolute;
    top: -5px;
    left: 0;
    width: 23px;
    height: 23px;
    border: 2px solid #79808A;
    border-radius: 4px;
  }
  .checkbox-input:checked + .checkbox-parts::after{
    display: block;
    position: absolute;
    top: -2px;
    left: 13px;
    width: 11px;
    height: 19px;
    transform: rotate(40deg);
    border-right: 3px solid red;
    border-bottom: 3px solid red;
    content: "";
  }
  .checkbox-input:checked + .checkbox-parts::before {
    border: 2px solid red;
  }
¥CSS¥