checkbox

by Pritesh Patel

HTML

<div>
  <input type="checkbox" class="nutrition-checkbox-available">
  <label class="nt-checkbox-label">Vegeterian</label>
</div>

CSS

.nutrition-checkbox-available:checked,
    .nutrition-checkbox-available:not(:checked) {
      position: absolute;
      left: -9999px;
    }
    .nutrition-checkbox-available:checked + .nt-checkbox-label,
    .nutrition-checkbox-available:not(:checked) + .nt-checkbox-label {
      position: relative;
      padding-left: 36px;
      cursor: pointer;
      line-height: 20px;
      display: inline-block;
    }
    .nutrition-checkbox-available:checked + .nt-checkbox-label:before,
    .nutrition-checkbox-available:not(:checked) + .nt-checkbox-label:before {
      content: "";
      position: absolute;
      left: 0;
      top: 0;
      width: 16px;
      height: 16px;
      border: 2px solid #68a51c;
      /* border-radius: 100%; */
      background: #fff;
    }
    .nutrition-checkbox-available:checked + .nt-checkbox-label:after,
    .nutrition-checkbox-available:not(:checked) + .nt-checkbox-label:after {
      content: "";
      width: 10px;
      height: 10px;
      background: #68a51c;
      position: absolute;
      top: 5px;
      left: 5px;
      border: solid white;
    border-width: 0 3px 3px 0;

      /* border-radius: 100%; */
      -webkit-transition: all 0.2s ease;
      transition: all 0.2s ease;
    }
    .nutrition-checkbox-available:not(:checked) + .nt-checkbox-label:after {
      opacity: 0;
      -webkit-transform: scale(0);
      transform: scale(0);
    }
    .nutrition-checkbox-available:checked + .nt-checkbox-label:after {
      opacity: 1;
      -webkit-transform: scale(1);
      transform: scale(1);
    }
    .nutrition-checkbox-available:disabled + .nt-checkbox-label:after,
    .nutrition-checkbox-available:not(:checked):disabled + .nt-checkbox-label:after {
      background:#ccc;
    }
    .nutrition-checkbox-available:disabled + .nt-checkbox-label:before,
    .nutrition-checkbox-available:not(:checked):disabled + .nt-checkbox-label:before {
      border: 2px solid #ccc;
    }