We are hiding default form element using CSS. The "for" attribute specifies which form element is bound to the Label. So label will act as an input element. "Id" name of the form element and "for" attribute name should be same.
I have used images for active & inactive mode. Instead of images we can use font-awesome.

HTML:

//Custom radio button
  <input id="apple" name="fruits" type="radio" />
     <label for="apple">        
       <img class="offradio" height="20" src="images/form_btn-radio-off.png" width="20" /> //Inactive image
       <img class="onradio" height="20" src="images/form_btn-radio-on-01.png" width="20" />  //Active image
    </label>
  <input id="orange" name="fruits" type="radio" />
     <label for="orange">        
       <img class="offradio" height="20" src="images/form_btn-radio-off.png" width="20" />
       <img class="onradio" height="20" src="images/form_btn-radio-on-01.png" width="20" /> 
    </label>
  <input id="graphes" name="fruits" type="radio" />
     <label for="graphes">        
       <img class="offradio" height="20" src="images/form_btn-radio-off.png" width="20" />
       <img class="onradio" height="20" src="images/form_btn-radio-on-01.png" width="20" /> 
    </label>
//Custom checkbox 
  <input id="fruits" name="fruits" type="checkbox" />
   <label for="fruits">          
       <img class="offradio" height="20" src="images/form_box-off.png" width="20" />
       <img class="onradio" height="20" src="images/form_box-on.png" width="20" />                
   </label>
  <input id="vegetables" name="vegetables" type="checkbox" />
   <label for="vegetables">          
       <img class="offradio" height="20" src="images/form_box-off.png" width="20" />
       <img class="onradio" height="20" src="images/form_box-on.png" width="20" />                
   </label>

CSS:

input[type="radio"], input[type="checkbox"] {
    display: none;
}

input[type="radio"]:checked + label .offradio,
input[type="checkbox"]:checked + label .offradio{
 display: block;
}

/* Hidding the "check" status of inputs */
input[type="radio"] + label .onradio,
input[type="checkbox"] + label .onradio {
display: none;
}

/* Styling the "check" status */
input[type="radio"]:checked + label .onradio,
input[type="checkbox"]:checked + label .onradio {
display: block;
}

input[type="radio"]:checked + label .offradio,
input[type="checkbox"]:checked + label .offradio {
display: none;
}