Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class="row row--alt survey_chbx">
    <input id="policy" type="checkbox" name="policy" class="checkbox" required>
    <label for="policy"><em title="Pflichtfeld">*</em> Ich bin mit den <a href="#">Nutzungsbedingungen</a> sowie mit der
      <a href="#">Erhebung meiner Daten</a> einverstanden.
    </label>
</div>


<br><br><br>


<div class="row survey_radio">
    <input id="radio2" name="radio" type="radio" class="radio"> <label for="radio2">Option 2</label>
</div>

SassMeister-input.scss

// ----
// Sass (v3.4.12)
// Compass (v1.0.3)
// ----

%vh {
	border: 0;
	clip: rect(0 0 0 0);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
}



// @mixin checkbox
//
// Markup needs to be input + label in sourceorder for this thing to work
//
// $height,
// $width,
// $labelcolor: $grey,
// $position: "right",
// $content: "×"
//

@mixin checkbox( $height, $width, $labelcolor, $color, $position: 'left', $content: "") {
  
   @extend %vh; 
 

  + label {
    color: $labelcolor;
    position: relative;
    padding: 12px;
    vertical-align: middle;

    @if $position == "right" {
      padding-right: 2.5em;
      margin-right: 6px;
    }

    @else if $position == "left" {
      padding-left: 2.5em;
      margin-left: 6px;
    }

    &:before {
      content: '';
      color: $color;
      position: absolute;
      top: 6px;

      @if $position == "right" {
        right: 0;
      }

      @else if $position == "left" {
        left: 0;
      }

      width: $width;
      height: $height;
      border: 1px solid #ededed;
      background: white;
      font-size: 18px;
      line-height: 21px;
      text-align: center;
    }
  }

  &:checked {
    + label {
      color: black;

      &:before {
        content: $content;
        font-size: 45px;
        line-height: 31px;
        text-align: center;
        text-transform: uppercase;
      }
    }
  }

  // Include any extra rules supplied
  @content;
}

// @mixin radio
//
// Markup needs to be input + label in sourceorder for this thing to work
//
// $height,
// $width,
// $labelcolor: $grey,
// $position: "right"
//

@mixin radio( $height, $width, $labelcolor, $color, $position: 'left') {
  
   @extend %vh; 
 
  + label {
    color: $labelcolor;
    position: relative;
    padding: 12px;
    vertical-align: middle;

    @if $position == "right" {
      padding-right: 2.5em;
      margin-right: 6px;
    }

    @else if $position == "left" {
      padding-left: 2.5em;
      margin-left: 6px;
    }

    &:before {
      content: '';
      color: $color;
      position: absolute;
      top: 6px;

      @if $position == "right" {
        right: 0;
      }

      @else if $position == "left" {
        left: 0;
      }

      width: $width;
      height: $height;
      border: 1px solid #ededed;
      background: white;
      font-size: 18px;
      text-align: center;
    }
  }

  &:checked {
    + label {
      color: black;

      &:after {
        content: '';
        background-color: $color;
        position: absolute;
        top: 14px;

        @if $position == "right" {
          right: 8px;
        }
        @else if $position == "left" {
          left: 8px;
        }

        width: 18px;
        height: 18px;
      }
    }
  }

  + label {
    &:before,
    &:after {
      border-radius: 50%;
    }
  }

  // Include any extra rules supplied
  @content;
}



.survey_chbx {

  .checkbox {
    @include checkbox($height: 32px, $width: 32px, $labelcolor: #000, $color: #ededed, $position: left, $content: '✔');
  }
}

.survey_radio {

  .radio {
    @include radio($height: 32px, $width: 32px, $labelcolor: #000, $color: #ededed, $position: right);
  }
}

SassMeister-output.css

@charset "UTF-8";
.survey_chbx .checkbox, .survey_radio .radio {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

.survey_chbx .checkbox + label {
  color: #000;
  position: relative;
  padding: 12px;
  vertical-align: middle;
  padding-left: 2.5em;
  margin-left: 6px;
}
.survey_chbx .checkbox + label:before {
  content: '';
  color: #ededed;
  position: absolute;
  top: 6px;
  left: 0;
  width: 32px;
  height: 32px;
  border: 1px solid #ededed;
  background: white;
  font-size: 18px;
  line-height: 21px;
  text-align: center;
}
.survey_chbx .checkbox:checked + label {
  color: black;
}
.survey_chbx .checkbox:checked + label:before {
  content: "✔";
  font-size: 45px;
  line-height: 31px;
  text-align: center;
  text-transform: uppercase;
}

.survey_radio .radio + label {
  color: #000;
  position: relative;
  padding: 12px;
  vertical-align: middle;
  padding-right: 2.5em;
  margin-right: 6px;
}
.survey_radio .radio + label:before {
  content: '';
  color: #ededed;
  position: absolute;
  top: 6px;
  right: 0;
  width: 32px;
  height: 32px;
  border: 1px solid #ededed;
  background: white;
  font-size: 18px;
  text-align: center;
}
.survey_radio .radio:checked + label {
  color: black;
}
.survey_radio .radio:checked + label:after {
  content: '';
  background-color: #ededed;
  position: absolute;
  top: 14px;
  right: 8px;
  width: 18px;
  height: 18px;
}
.survey_radio .radio + label:before, .survey_radio .radio + label:after {
  border-radius: 50%;
}

SassMeister-rendered.html

<div class="row row--alt survey_chbx">
    <input id="policy" type="checkbox" name="policy" class="checkbox" required>
    <label for="policy"><em title="Pflichtfeld">*</em> Ich bin mit den <a href="#">Nutzungsbedingungen</a> sowie mit der
      <a href="#">Erhebung meiner Daten</a> einverstanden.
    </label>
</div>


<br><br><br>


<div class="row survey_radio">
    <input id="radio2" name="radio" type="radio" class="radio"> <label for="radio2">Option 2</label>
</div>