Personalizar radios y checkbox

El siguiente fragmento de código reutilizable que puede simplificar y acelerar el proceso de personalización de campos de formulario tipo radio y checkbox

by InaWeb

HTML

<form action="/action_page.php">
  <p>Por favor ingrese su sabor favorito de helado:</p>
  <div class="control-radio">
    <input type="radio" id="Chocolate" name="helado" value="Chocolate">
     <label for="Chocolate">Chocolate</label>
  </div>
   <div class="control-radio">
    <input type="radio" id="Fresa" name="helado" value="Fresa">
     <label for="Fresa">Fresa</label>
  </div>
  <div class="control-radio">
    <input type="radio" id="Vainilla" name="helado" value="Vainilla">
     <label for="Vainilla">Vainilla</label>
  </div>
</form>

CSS

.control-radio{
  margin: 10px 0;
}
input[type='radio'] {
  /* Hide the input, but have it still be clickable */
  opacity: 0;
  float: left;
  width: 18px;
  margin:0;
}

input[type='radio'] + label {
  margin: 0;
  clear: none;

  /* Left padding makes room for image */
  padding: 5px 0 4px 24px;

  /* Make look clickable because they are */
  cursor: pointer;

  background: url(https://upload.wikimedia.org/wikipedia/commons/7/73/Flat_tick_icon.svg) left center no-repeat;
}

/* Change from unchecked to checked graphic */
input[type='radio']:checked + label {
  background-image: url(https://upload.wikimedia.org/wikipedia/commons/7/73/Flat_tick_icon.svg);
  margin-left:25px;
}

/*CSS Snippets: https://css-tricks.com/snippets/css/custom-checkboxes-and-radio-buttons */