Чекбоксы

Для изображения галочки используем FontAwesome.

<div class="checkbox">
  <input id="ch-1" type="checkbox" value="">	
  <label for="ch-1">Check 1</label>
</div>

.checkbox input {display:none;}
.checkbox input + label:before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  vertical-align: middle;
  margin-right: 8px;
  background-color: #aaa; 
}
.checkbox input:checked + label:before {
  font-family: FontAwesome;
  content: "\f00c";
  color: white;
  background-color: #666;
  text-align: center;
  line-height: 20px;
}

Радио

<div class="radio">
<input name="radio" id="r-1" type="radio" value="">  
  <label for="r-1">Radio 1</label>
</div>
<div class="radio">
  <input name="radio" id="r-2" type="radio" value="">  
  <label for="r-2">Radio 2</label>
</div>

.radio input {display:none;}
.radio input + label:before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  border-radius: 10px;
  vertical-align: middle;
  margin-right: 8px;
  background-color: #aaa; 
}
.radio input:checked + label:before {
  content: "\2022";
  color:white;
  background-color: #666; 
  font-size:1.8em;
  text-align:center;
  line-height:19px;
}