[input] 체크박스 이쁘게 만들기

// html
<div className={cn("checkbox-container")}>
          <input type="checkbox" id="check" className={cn("checkbox")} />
          <label htmlFor="check" className={cn("checkbox-label")}></label>
          <label htmlFor="check" className={cn("checkbox-description")}>
            주문한 상품정보(상품명, 상품가격, 휴대폰번호)를 가나다(상품 배송업체)에 전달 동의합니다.
          </label>
        </div>
        
        
// css
.checkbox {
      display: none;
    }

    .checkbox-label {
      position: relative;
      display: inline-block;
      width: 20px;
      height: 20px;
      cursor: pointer;
    }

    .checkbox-label:after,
    .checkbox-label:before {
      content: "";
      position: absolute;
      background: #fff;
    }

    .checkbox-label:before {
      width: 9px;
      height: 5px;
      border-left: 2px solid $gray-30;
      border-bottom: 2px solid $gray-30;
      transform: rotate(-45deg);
      top: 50%;
      left: 50%;
      opacity: 0;
      transition: opacity 0.2s;
    }

    .checkbox:checked + .checkbox-label:before {
      opacity: 1;
    }

    .checkbox-description {
      margin-left: 10px;
      cursor: pointer;
    }

🎉 Before

🎉 After