Preview:
.ginput_container_checkbox {
    .gchoice {
      margin-bottom: 1rem;

      @media (min-width: $md) {
        margin-bottom: 0;
      }

      label {
        position: relative;
        right: -4px;

        @media (min-width: $md) {
          right: -8px;
        }


        &::before {
          position: absolute;
          content: ' ';
          width: 16px;
          height: 16px;
          border: 1px solid $elgray;
          background: $lwhite;
          top: 3px;
          left: -20px;
          border-radius: 5px;

          @media (min-width: $md) {
            width: 20px;
            height: 20px;
            top: 3px;
            left: -26px;
          }
        }

        &::after {
          content: "";
          position: absolute;
          border-bottom: 2px solid $elgray;
          border-left: 2px solid $elgray;
          height: 6px;
          left: -16px;
          opacity: 0;
          top: 7px;
          transform: rotate(-45deg);
          transition: all .3s linear;
          width: 9px;

          @media (min-width: $md) {
            top: 9px;
            width: 10px;
            left: -21px;
          }
        }
      }

      input {
        opacity: 0;
      }

      input[type="checkbox"]:checked~label:after {
        opacity: 1 !important;
      }
    }
  }

  .ginput_container_radio {
    .gchoice {
      margin-bottom: 1rem;

      @media (min-width: $md) {
        margin-bottom: 0;
      }

      label {
        position: relative;
        right: -4px;

        @media (min-width: $md) {
          right: -8px;
        }

        &::before {
          position: absolute;
          content: ' ';
          width: 16px;
          height: 16px;
          border: 2px solid $primary;
          background: $white;
          top: 3;
          left: -20px;
          border-radius: 50%;

          @media (min-width: $md) {
            width: 20px;
            height: 20px;
            top: 3px;
            left: -26px;
          }
        }

        &::after {
          content: "";
          position: absolute;
          width: 8px;
          height: 8px;
          left: -16px;
          opacity: 0;
          top: 7px;
          border-radius: 50%;
          background: $primary;
          transition: all .3s linear;

          @media (min-width: $md) {
            width: 10px;
            height: 10px;
            top: 8px;
            left: -21px;
          }
        }
      }

      input {
        opacity: 0;
      }

      input[type="radio"]:checked~label:after {
        opacity: 1 !important;
      }
    }
  }
downloadDownload PNG downloadDownload JPEG downloadDownload SVG

Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!

Click to optimize width for Twitter