<div class="wrap-check-4">
  <label>
    <input type="checkbox"/>
    <span class="checkbox"></span>
  </label>
</div>
				
			
				
					.wrap-check-4 *,
  .wrap-check-4 *::before,
  .wrap-check-4 *::after {
    box-sizing: border-box;
  }

  .wrap-check-4 label {
    display: block;
    width: 35px;
    height: 35px;
    cursor: pointer;
  }

  .wrap-check-4 input {
    visibility: hidden;
    display: none;
  }

  .wrap-check-4 input:checked ~ .checkbox {
   transform: rotate(45deg);
   width: 14px;
   margin-left: 12px;
   border-color: 
#24c78e;
   border-top-color: 
transparent;
   border-left-color: 
transparent;
   border-radius: 0;
  }

  .wrap-check-4 .checkbox {
    display: block;
    width: inherit;
    height: inherit;
    border: 3px solid 
#434343;
    border-radius: 6px;
    transition: all 0.375s;
  }